JQuery tooltip not displaying

Question

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

You should try to use a class instead of an ID in this case. Valid HTML doesn't allow duplicate ID's for elements. — Ryan
– Ryan, Commented Mar 20, 2013 at 20:32
Also you're tooltip is a class and you're referencing an id $('.tooltip')..... — romo
– romo, Commented Mar 20, 2013 at 20:35
Like 'romo' mentioned your code should look like this: function showTooltip() { $(".tooltip").each(function() { $(this).tooltip(); }; }; — Kickass
– Kickass, Commented Aug 11, 2018 at 2:50

Kickass · Accepted Answer · 2017-01-21 18:23:56Z

24

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

edited Jan 21, 2017 at 18:23

answered Jan 21, 2017 at 18:17

Kickass

1,15210 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user151496 Over a year ago

that was a sneaky one

Fomentia Over a year ago

Exceedingly disappointing. If they have a content option for setting the content, why do I have still have to use title in the HTML? 🙄

Kickass Over a year ago

JQuery-UI dpoesn't bother me anymore because I no longer use it anywhere. If I need a dialog box for example, I create it from scratch.

jMike Over a year ago

Thanks! I also needed an empty title attribute for the display.

Morey Over a year ago

Excellent response. I couldn't agree with you more in not handling null titles! This helped me solving several wasted hours.

Joe Pigott · Accepted Answer · 2013-07-10 23:03:52Z

7

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

answered Jul 10, 2013 at 23:03

Joe Pigott

8,6077 gold badges34 silver badges44 bronze badges

Comments

Moe · Accepted Answer · 2017-11-30 03:44:36Z

2

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

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

edited Nov 30, 2017 at 3:44

Moe

3251 gold badge4 silver badges13 bronze badges

answered Mar 20, 2013 at 20:43

Tiago B

2,09519 silver badges39 bronze badges

4 Comments

Ryan Taylor Over a year ago

Doh! I believe this is the answer, but I still can't get it to show.

Tiago B Over a year ago

Did you you call that function on document ready? The example at JQueryUI.com calls it on document ready.... And be sure to import jQuery.js, jquery-ui.js, and jquery-ui.css

Ryan Taylor Over a year ago

It wasn't in document.ready but it is now. It's still not showing up. Maybe it's out of focus. idk... It seemed so simple in the api documentation, but this is frustrating!

juju Over a year ago

You can use a class or id selector with the tooltip function

Moshe Fortgang · Accepted Answer · 2022-01-31 10:42:58Z

1

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

answered Jan 31, 2022 at 10:42

Moshe Fortgang

1,2109 silver badges23 bronze badges

Comments

neodonator · Accepted Answer · 2016-11-17 15:26:29Z

0

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

edited Nov 17, 2016 at 15:26

answered Nov 17, 2016 at 14:17

neodonator

291 silver badge4 bronze badges

1 Comment

neodonator Over a year ago

just by $(document).tooltip(); did not work for me. I had to do it for specific element where I needed to add items: "#id", to get specific, so just I wanted to share

HoldOffHunger · Accepted Answer · 2018-03-23 19:05:38Z

0

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.

answered Mar 23, 2018 at 19:05

HoldOffHunger

21.3k11 gold badges123 silver badges147 bronze badges

Comments

wsrt · Accepted Answer · 2022-09-21 06:57:44Z

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.

Collectives™ on Stack Overflow

JQuery tooltip not displaying

7 Answers 7

5 Comments

Comments

4 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

5 Comments

Comments

4 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related