JQuery UI Tooltip with data attributes

问题:

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?

http://jsfiddle.net/QsEJk/2/

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

回答1:

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.

回答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.

文章来源: JQuery UI Tooltip with data attributes