Question

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

我正在使用JQuery UI进行工具提示。

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

我缺少什么想法？

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]将需要为工具提示指定的两个属性才能生效。

Answer 2

接受的答案对我有用，但在我的情况下，我希望这适用于页面上的许多项目，因此不希望每个项目都有变量。相反，我使用了这个：

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

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

带有数据属性的JQuery UI Tooltip

2 个答案: