jQueryUI工具提示正在与Twitter Bootstrap竞争

我已经能够使用以下代码最终获得一些工具提示：

<a href="#" rel="tooltip" title="Tool tip text here">Hover over me</a>

然后

<script>
    $('[rel=tooltip]').tooltip();
</script>

我遇到的问题是它使用的是jQueryUI工具提示（无箭头，丑陋的大工具提示）而不是Bootstraps。

我需要怎么做才能使用Bootstrap工具提示而不是jQueryUI？

jQuery UI和Bootstrap都使用tooltip该插件的名称。使用$.widget.bridge创造了jQuery UI的版本不同的名称，并允许引导插件留下来命名的工具提示（试图使用noConflict的引导选项窗口小部件只是造成了很多的错误，因为它不能正常工作，这个问题已经在这里报道）：

// Resolve name collision between jQuery UI and Twitter Bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);

因此，使它起作用的代码：

// Import jQuery UI first
<script src="/js/jquery-ui.js"></script>
// Resolve name collision between jQuery UI and Twitter Bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);
// Then import bootstrap
<script src="js/bootstrap.js"></script>

不错的复制粘贴代码，它也可以处理按钮冲突：

<script type="application/javascript" src="/js/jquery.js"></script>
<script type="application/javascript" src="/js/jquery-ui.js"></script>
<script>
/*** Handle jQuery plugin naming conflict between jQuery UI and Bootstrap ***/
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);
</script>
<script type="application/javascript" src="/js/bootstrap.js"></script>

一个简单的解决方案是在jquery-ui.js之后加载bootrap.js，以便bootstrap .tooltip方法优先。

这为我工作：

如果您需要使用JQuery-UI，但要使用引导程序的工具提示，只需从此网站获取定制版本的JQuery-UI 。

只需取消选中“工具提示”选项，然后下载它（它将类似于“ jquery-ui-1.10.4.custom.js”）。

只需将其添加到您的项目中，而不是将其添加到您当前正在使用的版本中，即可开始聚会了。这样可以避免冲突。它对我来说就像一种魅力！

如果您必须jquery-ui.js在bootstrap.js此之后加载，请执行以下操作：

<script type="application/javascript" src="/js/jquery.js"></script>
<script type="application/javascript" src="/js/bootstrap.js"></script>

<script>var _tooltip = jQuery.fn.tooltip;</script>
<script type="application/javascript" src="/js/jquery-ui.js"></script>
<script>jQuery.fn.tooltip = _tooltip;</script>

这将覆盖jquery-ui的工具提示，并始终使用引导程序。

假设在初始化bootsrap之后将调用UI

在初始化UI之前存储引导程序功能

jQuery.fn.bstooltip = jQuery.fn.tooltip; 

然后按以下方式调用

$('.targetClass').bstooltip();

此解决方案对我来说似乎很好。

// handle jQuery plugin naming conflict between jQuery UI and Bootstrap
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);

仅使用Bootstrap弹出窗口怎么样？BS弹出窗口虽然需要相同的tooltip.js组件，但不会产生相同的冲突。是的，它们更具风格，但不会导致我的JQuery UI按钮出现问题。

我仅将Jquery UI用于自定义自动完成/组合框（因此不能声称其他JQ-UI控件是可以的），并且上述方法均无法解决调用BS Tooltips时组合框按钮变为“未样式化”的CSS问题。切换到BS Popover可以提供基本相同的效果，没有冲突，无需重新定义脚本导入，也不需要显式的bridge语句。

尝试使用jQuery.noConflict（）看看是否有帮助。看起来bootstrap和jQuery使用相同的名称空间，并且bootstrap和jQuery工具提示可能被加载到同一函数中，或者首先被加载。

您还可以检查先加载哪个库。通常，如果您在javascript中两次声明相同的函数，则第二个即为使用的函数。

第三，检查jQueryUI软件包（在其网站上），看看是否可以下载不包含工具提示的版本（我检查了一下，这完全可行）。

有一个简单而有效的解决方案，只需重新排列引导程序和jquery ui文件链接，如下所示：

 <script src="/js/jquery-ui.min.js" type="text/javascript"></script>
 <script src="/js/bootstrap.min.js" type="text/javascript"></script>

只需在加载boostrap js文件之前加载jQueryui。对我来说有用。

一种简单的方法是在jquery-ui.js之后加载bootstrap.js，以便bootstrap .tooltip覆盖jquery UI。如果您正在使用诸如requirejs之类的模块加载器，则可以使引导依赖于jquery-ui，如下所示：

requirejs.config({
    baseUrl: 'js',
    waitSeconds: 30,
    shim: {
        'bootstrap': {
            deps: [ 'jquery', 'jquery-ui' ]
        },...