jQueryUI工具提示与Twitter Bootstrap竞争

我已经能够得到一些工具提示终于与下面的代码工作：

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

接着

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

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

我需要做什么来使用Bootstrap Tooltips而不是jQueryUI？

Answer 1

jQuery UI和Bootstrap都使用tooltip插件的名称。 使用$.widget.bridge为jQuery UI版本创build一个不同的名称，并允许Bootstrap插件保持命名工具提示（尝试使用Bootstrap小部件上的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> 

好的复制粘贴代码，也处理button冲突：

 <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> 

Answer 2

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

Answer 3

这对我工作：

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

只需取消选中“工具提示”选项，并下载它（这将是“jquery-ui-1.10.4.custom.js”）。

只需将其添加到您的项目中，而不是现在正在使用的版本，即可开始派对。 这将避免冲突。 它对我来说就像一个魅力！

Answer 4

这个解决scheme似乎对我很好。

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

Answer 5

如果您必须在bootstrap.js之后加载jquery-ui.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>var jQuery.fn.tooltip = _tooltip;</script> 

Answer 6

假设UI会在靴子初始化后调用

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

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

然后把它称为如下

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

Answer 7

如何使用Bootstrappopup而不是？ BS popovers不会创build相同的冲突，尽pipe它们需要相同的tooltip.js组件。 是的，他们更风格化，但不会导致我的JQuery UIbutton变得不可思议。

我只使用Jquery UI来定制自动完成/combobox（所以不能声称其他的JQ-UI控件都可以）并且上述方法都不能解决当调用BS工具提示时combobox的CSS问题变成“unstyled”。 切换到BS Popovers提供了基本相同的效果，没有冲突，不需要对我的脚本导入进行重新sorting，也不需要明确的桥接语句。

Answer 8

尝试使用jQuery.noConflict（） ，看看是否可以帮助你。 它看起来像bootstrap和jQuery使用相同的名称空间，也许引导程序和jQuery工具提示被加载到相同的function，或先被加载。

您也可以查看哪个库首先被加载。 通常如果你在javascript中声明了两次相同的函数，那么第二个函数就是使用的函数。

第三，检查jQueryUI包（ 在他们的网站上） ，看看你是否可以下载没有包含工具提示的版本（我检查过，这是完全可行的）。

Answer 9

有一个简单而好的解决scheme，只需重新安排你的引导和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。 这对我有用。

Answer 10

一个简单的方法是在jquery-ui.js之后加载bootstrap.js，以便引导.tooltip覆盖jQuery UI。 如果你使用像requirejs这样的模块加载器，那么你可以使引导程序依赖jquery-ui，例如：

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