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?

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 either attribute is on the .info-icon span.

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

Answer 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.