wordpress 网站中的 jQuery UI 工具提示答案

【问题标题】：jQuery UI tooltip in wordpress sitewordpress 网站中的 jQuery UI 工具提示
【发布时间】：2015-02-16 20:43:16
【问题描述】：

试图让工具提示使用图片而不是文本。到目前为止，它适用于我网站中的文本。

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

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

这很好用。它在链接悬停时显示“hello world”。

但是如果我尝试以下方法； working jsfiddle example，但在我的 WP 网站上，它根本没有显示任何内容而失败。为什么会这样？

【问题讨论】：

控制台有错误吗？
@VidyaNair 没什么……有点奇怪。
尝试停用每个插件并检查它是否正常工作
@VidyaNair 但它适用于文本...所以只要它只显示 title="" 属性，tooltip() 就可以工作。
我已经用我当地的 wp 网站检查了你的代码，它工作正常。确保控制台中没有错误并且正在加载脚本

标签： jquery wordpress user-interface tooltip

【解决方案1】：

这主要是因为您的 WordPress 主题自动使用具有自己工具提示的 Bootstrap。它的tooltips也使用了相同的函数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
    });
});

【讨论】：