具有数据属性的JQuery UI工具提示 [英] JQuery UI Tooltip with data attributes

问题描述

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

I'm attempting to use HTML5 data attributes to store and display content for a tooltip.

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

I'm using JQuery UI for the tooltip.

我已经阅读了文档，但是还没有弄清楚如何编写正确的选择器并显示自定义数据.

I've read the documentation, but haven't figured out how to program the right selector and display the custom data.

对我所缺少的东西有什么想法吗?

Any ideas of what I'm missing?

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

$(".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]将起作用.

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

[data-title][data-desc] will require both attributes specified for the tooltip to work.

这篇关于具有数据属性的JQuery UI工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！