Dynamic Tooltip Design

I'm trying to figure out how to add a tooltip specifically on the first item in my li list. However, when I apply the "tooltip" class to the li element, the entire li seems to disappear. Here is an example of my HTML code:

<li><span class="fa-pencil-square-o sub"> </span> <p class="subMenu">Edit</p>
          <ul>
              <li></li>
              <li></li>
          </ul>
    </li>

And here is the JavaScript snippet I am using:

$(document).ready(function() {
    $("a[rel='tooltip'], .tooltip").tooltip();
});

Answer №1

Personally, I am a big fan of using CSS Tooltips. Here is an example that you might find helpful:

a.tooltip {border:none; }
a.tooltip strong {line-height:25px;}
a.tooltip:hover {text-decoration:none;} 
a.tooltip span {
    z-index:10;display:none; padding:12px 18px;
    margin-top:-25px; margin-left:22px;
    width:250px; line-height:14px;
}
a.tooltip:hover span{
    display:inline; position:absolute; color:#111;
    border:1px solid #DDD; background:#fffAF0;}
.callout {z-index:20;position:absolute;top:28px;border:0;left:-10px;}
    
/*Additional CSS3 Styles*/
a.tooltip span
{
    border-radius:8px;
    box-shadow: 8px 8px 10px #CCC;
}
<li><span class="fa-pencil sub"> </span> <p class="submenu">Edit</p;
          <ul>
              <li>
                 <a href="#" class="tooltip">
                    Tooltip Example
                    <span>
                    This is a simple tooltip.
                    </span>
                 </a>
                  
              </li>
              <li></li>
          </ul>
    </li>

Source:

Answer №2

<li><span class="fa-pencil-square-o sub"> </span> <p class="subMenu">Edit</p>
      <ul id="listElement">
          <li></li>
          <li></li>
      </ul>
</li>

JavaScript:

    $(function()
      {   $("#listElement li:first").tooltip();
      });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Summernote information embedded with HTML elements

I just started using the summernote text editor and I'm trying to figure out how to extract the content from the textarea without all the HTML tags. This is what I have in my code: <textarea class="summernote" id="summernote" ng-model="blog.c ...

What is the best way to align a dialog box on a screen?

I'm having an issue with the positioning of my dialog box - it always appears in the upper left corner when I want it to be centered in the middle. Can anyone provide guidance on how to achieve this? Below is my script code: $(function() { $("#c ...

jQuery concealing selections from dropdown menus

Is there a way to use jquery sort to order dropdown list options and hide the "select" item in the dropdown? Check out my fiddle code here <select id="mySelect"> <option value="">select</option> <option value="1">a</opt ...

Utilizing CSS for multiple carousels while applying unique styles to each one individually

I am currently working on modifying the code below so that it will only execute when a specific class is linked to the carousel. There are multiple carousels present on the same page. @media (min-width: 576px) and (max-width: 768px) { /* Display the 3r ...

Tips for preventing H1 from taking up the entire div

I'm currently working on developing a new theme for my WordPress website. One issue I've encountered is that the h1 element is causing the top menu to appear below it instead of on the same line. Can anyone help me overcome this challenge? Here& ...

What happens when a disabled option is chosen in a select element?

My approach to include a default disabled option "Select a town" in a select dropdown using HTML is as follows: <select name="town"> <option selected disabled value="xx">-- Select a town --</option> <option value="1">Paris ...

How to incorporate an image within a div element without reliance on the <img> tag

I am dealing with HTML content <div> <img src="xyz.jpg"> </div> The challenge I am facing is fetching an image in hex format from a web service, converting it to JPEG, and displaying it inside a div. However, the <img src=""> ta ...

Is it possible to clear a row of images and then repopulate it with new images without losing the click listeners associated with each image?

I am currently developing a memory game that involves clicking on images as the main objective. After clicking on an image, the pictures are then rearranged on the page. However, if you click on the same image twice, you will lose and the game will reset. ...

Creating a text to PNG conversion with no top and bottom spacing

Currently working on developing a PHP function that utilizes imagettftext to convert text into an image in PNG format while cropping from the top to the bottom of the letters. I've experimented with both GD (PHP) and html2canvas (JavaScript). Unfort ...

Positioning my login form in the right spot is proving to be a challenge

I'm working on integrating this form into my website, but I'm having trouble placing it in the top right corner of the header. Below is the HTML code: $(function(){ var $form_inputs = $('form input'); var $rainbow_and_b ...

What is the best way to iterate through this using forEach?

let array = [{ query:{ q1 : 123, q2 : 44 } }]; Despite attempting to use a forEach loop, no results were returned. ...

Looking for consistent vertical and horizontal scrolling behavior in a React project

I am in need of assistance as I lack the necessary expertise in ReactJs to transform this design. Currently, it is written in Jquery but I would like guidance on how to recreate it in ReactJs. Specifically, I want the left div with the topic for each row t ...

Tips for including HTML tags in strings without causing issues with nested tags

I am struggling with a string that contains both text and HTML tags, specifically <a href=""></a> tags. My goal is to apply the "i" tag around the text outside of the "a" tags without creating nested tags like: <i><a href=""></a ...

Utilizing jPlayer to play music files uploaded using Paperclip in a Ruby on Rails application with the help of jQuery

Just wanted to say thanks in advance for any help. Currently, I am storing songs in a filesystem using Paperclip and attempting to play them with jPlayer. Despite following all the necessary steps, I am unable to get the audio to play when clicking on a ...

Unable to align only one link on the right as flex-end is not functioning correctly

I need help rearranging my row of items displayed at the top of the page. I want one item to appear on the far right while the rest are aligned to the left. I attempted using align-self: flex-end but it didn't work. Here's the current code snippe ...

Can you please explain the significance of this error for me?

I'm attempting to showcase specific elements from an array in my code. <?php $data = array( 1000 => array( "id" => 1000, "number" => 2380, "name" => "CS2", "instructor" => "Chen", "rating" => null ), 1001 => a ...

PHP and Bootstrap combine in this dynamic carousel featuring thumbnail navigation

Looking to create a dynamic bootstrap carousel with image thumbnails at the bottom? After exploring various code snippets and solutions, I stumbled upon this link. While the code worked, I found the thumbnails to be too small. Below are the functions I use ...

Implementing image logout functionality in PHP

Is there a way I can associate an image with the logout link generated by this command? Thank you. <?php echo $login->get_link_logout(); ?> ...

What exactly is the purpose of the double ampersand selector, '&&', when it comes to overriding the root class with makeStyles within Material-UI React?

I recently started using Material-UI and encountered an issue where I couldn't override the root class for Avatar, specifically MuiAvatar-root. Material-Ui Version: 4.11.3 Despite following examples provided by material-ui's documentation here, ...

Navigating Google GeoChart Tooltips using Google Spreadsheet Data

My objective is to create a custom GeoChart for the company's website that will display data specific to each state in the US region based on team member assignments. The GeoChart should color states according to which team member helps that state&apo ...