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

威尔·M

我正在尝试使用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');
    }
});

您需要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] 将需要为工具提示指定的两个属性都起作用。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

jQuery UI弄乱了工具提示

来自分类Dev

jQuery ui工具提示与bootstrap 3工具提示冲突

来自分类Dev

jQuery UI工具提示:单击工具提示本身即可关闭

来自分类Dev

没有标题属性的简单jQuery UI工具提示

来自分类Dev

jQuery UI工具提示html和链接

来自分类Dev

如何检查JQuery UI工具提示?

来自分类Dev

禁用按钮上的jQuery UI工具提示

来自分类Dev

jQuery UI工具提示加载并延迟显示

来自分类Dev

单击jQuery-ui工具提示

来自分类Dev

jQuery UI工具提示html和链接

来自分类Dev

jQuery UI工具提示加载并延迟显示

来自分类Dev

jQuery UI工具提示-动态内容

来自分类Dev

jQuery UI工具提示未显示

来自分类Dev

单击时的jQuery-ui工具提示

来自分类Dev

具有内容功能的jQuery ui工具提示(来自data属性的url)

来自分类Dev

从部分视图MVC中的jQuery UI工具提示

来自分类Dev

如何在jQuery UI中为selectmenu提供工具提示?

来自分类Dev

jQuery UI工具提示可在“点击”而不是悬停时触发

来自分类Dev

仅在单击时打开Jquery-ui工具提示

来自分类Dev

如何为所选元素启用jQuery UI工具提示?

来自分类Dev

使用jQuery UI设置动态元素的工具提示的位置

来自分类Dev

单击后jQuery UI工具提示不会消失

来自分类Dev

jQuery UI工具提示在IE和Chrome中的位置不同

来自分类Dev

是否可以在表格行上使用jQuery UI工具提示?

来自分类Dev

jQuery UI工具提示不显示在按钮标签上

来自分类Dev

jQuery UI-动态生成按钮的工具提示

来自分类Dev

如何在jQuery UI-Slider上居中工具提示

来自分类Dev

禁用jQuery UI工具提示,但某些元素除外

来自分类Dev

工具提示单击事件中的jquery-ui标记“ a”

Related 相关文章

热门标签

归档