JQuery UI Tooltip with Data Attributes

Question

I am trying to use HTML5 data attributes to store and display content for a tooltip.

I am using jQuery UI for tooltip.

I read the documentation, but did not understand how to program the correct selector and display user data.

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

Answer 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 any attribute is in the range of .info-icon .

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

Answer 2

The accepted answer worked for me, but in my case, I wanted this to apply to many elements on the page, so I don't need to have a variable for each. Instead, I used this:

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

This applies to the help content for each .help element on the page.