jQueryUI工具提示与Twitter Bootstrap竞争

Question

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

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

然后

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

我遇到的问题是它使用的是jQueryUI工具提示(没有箭头,大丑陋的工具提示)而不是Bootstraps.

我需要做些什么来使用Bootstrap工具提示而不是jQueryUI？

Answer 1

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>

Answer 2

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

Answer 3

这对我有用:

如果您需要使用JQuery-UI但想要使用bootstrap的工具提示,只需从该网站获取JQuery-UI的自定义版本.

只需取消选中"工具提示"选项,然后下载它(它将类似于"jquery-ui-1.10.4.custom.js").

只需将其添加到您的项目而不是您当前使用的版本,您就可以开始派对了.这样可以避免冲突.它对我来说就像一个魅力!

Answer 4

如果你必须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的工具提示并始终使用bootstraps.

Answer 5

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

在UI初始化之前存储引导函数

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

然后将其称为以下

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

Answer 6

这个解决方案似乎对我有用.

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

Answer 7

那么只使用Bootstrap popovers呢？BS popovers不会创建相同的冲突,尽管它们需要相同的tooltip.js组件.是的,它们更具风格,但不会导致我的JQuery UI按钮变得不稳定.

我正在使用Jquery UI仅用于自定义自动完成/组合框(因此无法声称其他JQ-UI控件都可以)并且以上都没有解决在调用BS工具提示时组合框按钮变为"无样式"的CSS问题.切换到BS Popovers提供了基本相同的效果,没有冲突,没有重新排序我的脚本导入,也没有需要明确的桥接语句.

Answer 8

尝试使用jQuery.noConflict()看看这是否对您有帮助。看起来 bootstrap 和 jQuery 使用相同的命名空间，也许 bootstrap 和 jQuery 工具提示被加载到同一个函数中，或者先加载一个。

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

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