wordpress 站点中的 jQuery UI 工具提示

Question

试图获得使用图片而不是文本的工具提示。就它而言，它适用于我网站中的文本。

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

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

这工作正常..它在链接悬停时显示“hello world”。

但是，如果我尝试以下操作；正在工作的 jsfiddle 示例，但在我的 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
    });
});