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

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/

编辑：

如果任一属性在.info-icon 范围内，[data-title],[data-desc] 将起作用。

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

Answer 2

接受的答案对我有用，但就我而言，我希望将其应用于页面上的许多项目，因此不希望每个项目都有一个变量。相反，我使用了这个：

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

这会将数据帮助内容应用于页面上的每个 .help 项。