具有数据属性的 JQuery UI 工具提示

我正在尝试使用 HTML5 数据属性来存储和显示工具提示的内容。

我使用 JQuery UI 作为工具提示。

我已阅读文档，但尚未弄清楚如何对正确的选择器进行编程并显示自定义数据。

对我所缺少的有什么想法吗？

http://jsfiddle.net/QsEJk/2/ 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');
    }
});

你需要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/ http://api.jqueryui.com/tooltip/

Edit:

[data-title],[data-desc]如果任一属性位于.info-icon span.

[data-title][data-desc]将需要为工具提示指定的两个属性才能工作。