带有数据属性的JQuery UI Tooltip

Question

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

我正在使用JQuery UI作为工具提示.

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

我缺少什么想法？

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

你需要这个items选项

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

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

编辑:

[data-title],[data-desc]如果任一属性在.info-icon 跨度上,则将起作用.

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