JQuery UI Tooltip with data attributes

Question

I'm attempting to use HTML5 data attributes to store and display content for a tooltip.

I'm using JQuery UI for the tooltip.

I've read the documentation, but haven't figured out how to program the right selector and display the custom data.

Any ideas of what I'm missing?

HTML:

<span class="info-icon"
    data-title="custom title"
    data-desc="custom description">
</span>

JS:

$( '.info-icon' ).tooltip({
    content: function() {
        return 'Title: ' + $( this ).data('title') +
               ' Description: ' + $( this ).data('desc');
    }
});

First, you should write ready(function() { instead of ready({. Second, you should add your jQuery UI theme's CSS file as an external resource to your fiddle (and maybe in your page also). The rest of the code looks fine. — Frédéric Hamidi
– Frédéric Hamidi, Commented Jul 5, 2013 at 19:20
Well, nope. jsFiddle handles the inclusion of the jQuery UI scripts, but not of its CSS files. — Frédéric Hamidi
– Frédéric Hamidi, Commented Jul 5, 2013 at 19:30

Jasen · Accepted Answer · 2014-09-12 18:07:07Z

11

You need the items option

$(".info-icon").tooltip({
    items: "[data-title], [data-desc]",
    content: function () {
        return 'Title: ' + $(this).data("title") + ' Description: ' + $(this).data('desc');
    }
});

http://api.jqueryui.com/tooltip/

Edit:

[data-title],[data-desc] will work if either attribute is on the .info-icon span.

[data-title][data-desc] will require both attributes specified for the tooltip to work.

edited Sep 12, 2014 at 18:07

answered Jul 5, 2013 at 19:34

Jasen

14.3k3 gold badges55 silver badges70 bronze badges

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

4 Comments

Frédéric Hamidi Over a year ago

Or maybe [data-title][data-desc] since the content function uses both attributes?

Will M Over a year ago

Hmm, the items option makes the API a bit confusing, but thank you!

lehel Over a year ago

Why do you need the function&return to specify the content? Why doesn't "content: $(this).data('text')" this work? Can you please explain? Thank you!

Jasen Over a year ago

@lehel content is a callback delegate function. The plug-in expects to run content as a function.

Abby · Accepted Answer · 2014-01-25 09:31:26Z

2

The accepted answer worked for me but in my case I wanted this applied to many items on the page so didn't want a variable for every one. Instead I used this:

        $(".help").each(function() {
            $(this).tooltip({
                content: $(this).data('help')
            });
        });

This applies the data-help content to every .help item on the page.

answered Jan 25, 2014 at 9:31

Abby

3,2291 gold badge25 silver badges44 bronze badges

1 Comment

Mauro Mascia Over a year ago

It works on multiple items by default.Please see this fiddle: jsfiddle.net/QsEJk/21

Collectives™ on Stack Overflow

JQuery UI Tooltip with data attributes

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related