'JQuery tooltip not displaying

I'm trying to set a tooltip for some listed elements using jquery ui but I can't get the tooltips to show. I'm trying to apply a tooltip to all items using the tooltip class. Please check my code for problems...

HTML

<li>
<label>
  <input id="someid" type="radio" name="name" />
  <strong><span>text</span></strong></label>
  <a href="#" class="tooltip" title="some text"></a>
  <h4>text</h4>
</li>

JS

function showTooltip() {
$("#tooltip").each(function()
    {
        $(this).tooltip();
    };
};

Thanks :)

jquerytooltip


Solution 1:[1]

For anyone else struggling with tooltip not working.

I have found a number of issues with jquery-ui as of late, however it seems they did not handle null input of the default item content.

Thus by default it is 'title' so if you did not enter a title attribute to the element you want to make the tooltip object it will fail even if you specify the content like so: 

$("#element").tooltip({content:"test"});

It's pretty weak not to handle null(or undefined) values in my opinion but that's how it is.

I handled it by adding a title attribute like so to the element:

title=''

I guess you could specify a items in the tooltip constructer like so:

$("#selector").tooltip({items:'other-title', content: 'test'});

But then you would still need to add the new attribute to the element like so:

other-title=''

PS: using JQuery-UI 1.11.4

Solution 2:[2]

Try using:

JS:

$(document).ready(function(){
    $(document).tooltip();
});

so everything with title="yourtitle" in it will have a jquery tooltip when you hover over it.

Example

Solution 3:[3]

In my case, the problem occurred because Bootstrap was also loaded on the page.

Solution 4:[4]

when I used $(document).tooltip(); , It made tooltip for every element, to get tooltip for specific I used, 

    $(function () {
      $(document).tooltip({
          track: true, 
          items: ".tooltip",
          content: function () {
              return $(this).attr("title");
          }
      });
  });

Solution 5:[5]

Like others are saying, all you should need is the following:

$(document).tooltip();

But there are exceptions where this alone will just not work. Specific cases where this will not work:

  • option elements within a select block. (tooltip displays underneath the select option)
  • disabled="true" elements will continue to display tooltips in non-jQuery-UI format until re-enabled.

Besides reprogramming jQuery-UI, I have found no real solution to these problems.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Joe Pigott
Solution 3 mfort
Solution 4
Solution 5 HoldOffHunger

Related Questions