CODEWITHSUNDEEP
jquerytooltip
Ryan Taylor
Ryan Taylor

Reputation: 281

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 :)

Upvotes: 13

Views: 31339

Answers (7)

wsrt
wsrt

Reputation: 211

Supposing I want to show a tooltip on an input, I can do it using the HTMl attribute "title" as:

`<input type="text" id="an_id" style="width: 120px" title='Tooltip on an_id'>`

Hovering the mouse pointer over the element would show the message contained within the title tag as a tooltip.

Likewise, it is also possible to add a tooltip using the attribute "title' on a cell ('TD') of an HTML table using jQuery.

A use case may be multiple inputs displayed in cells within an HTML table:

$(function() {
    $(document).on('mouseover', '#my_table td', function() {
        $("#input1").attr('title', 'Tooltip 1 using jQuery');
        $("#input2").attr('title', 'Tooltip 2 using jQuery');
    });
});

We may further extend the functionality in other ways too, eg. to dynamically added table rows.

Upvotes: 0

Moshe Fortgang
Moshe Fortgang

Reputation: 1125

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

Upvotes: 1

HoldOffHunger
HoldOffHunger

Reputation: 20851

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.

Upvotes: 0

Tiago B
Tiago B

Reputation: 2065

Your function must have a class selector: $(".class")... not $("#id")

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

Upvotes: 2

Kickass
Kickass

Reputation: 1134

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

Upvotes: 24

neodonator
neodonator

Reputation: 29

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");
          }
      });
  });

Upvotes: 0

Joe Pigott
Joe Pigott

Reputation: 8459

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

Upvotes: 7

Related Questions