带有数据属性的JQuery UI Tooltip

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

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

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

我缺少什么想法？

http://jsfiddle.net/QsEJk/2/

HTML：

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项。