WordPress 网站中的 jQuery UI 工具提示

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

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

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

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

但如果我尝试以下操作；工作 jsfiddle 示例 http://jsfiddle.net/vvVwD/842/，但在我的 WP 网站上，它失败了，因为根本没有显示任何内容。为什么会这样呢？

这主要是因为您的 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
    });
});