jQuery UI wordpress 站点中的工具提示

Question

正在尝试让工具提示使用图片而不是文本。目前它适用于我网站中的文本。

<a id="thisId" href="#" title="hello world" >ALOHA!</a>

<script>
    jQuery(document).ready(function(){
        jQuery( '#thisId' ).tooltip();
    });
</script>

这很好.. 它在 link 悬停时显示 "hello world"。

但是如果我尝试以下操作； working jsfiddle example ，但在我的 WP 网站上，它因不显示任何内容而失败。为什么会这样？

Answer 1

这主要是因为您的 WordPress 主题自动使用 Bootstrap，它有自己的工具提示。它的工具提示也使用相同的函数tooltip()，所以它只是JQuery UI & BootStrap.

之间的命名冲突

要解决此问题，您可以强制重命名 JQuery Ui 中使用的 tooltip() 函数，如下所示：

jQuery.widget.bridge( 'jQueryUITooltip', jQuery.ui.tooltip );

并且从现在开始使用 jQueryUITooltip() 而不是 tooltip() 来初始化 JQuery UI 工具提示，示例：

jQuery(document).ready(function(){
    jQuery( '#thisId' ).jQueryUITooltip({
       track: true
    });
});

jQuery UI wordpress 站点中的工具提示

jQuery UI tooltip in wordpress site

wordpress

jquery

user-interface

tooltip