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

【问题标题】：jQueryUI Tooltips are competing with Twitter BootstrapjQueryUI 工具提示正在与 Twitter Bootstrap 竞争
【发布时间】：2012-11-23 18:15:48
【问题描述】：

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

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

然后

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

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

我需要做什么才能使用引导工具提示而不是 jQueryUI？

【问题讨论】：

这两样东西都需要吗？
不...我只想拥有 Bootstrap 工具提示。
对不起，我的意思是你需要 jquery ui 和引导程序吗？
这对我有用，看看这个answer
@markdotnet：不正确。 Bootstrap 需要核心 JQuery 库，not JQuery.UI.

标签： jquery-ui twitter-bootstrap

【解决方案1】：

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

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

第三，检查 jQueryUI 包（on their website) 看看是否可以下载不包含工具提示的版本（我检查过，这是完全可行的）。

【讨论】：

所以这很奇怪......我正在以相同的顺序加载 javascript 库，但是当我遇到问题时，我在标记和bootstrap.js 在我的所有内容之后。我将 bootstrap.js 移到我的内容上方（但仍在 jquery-ui.js 之后），现在它正在呈现我所期望的工具提示。我希望这不会弄乱我网站的世界。我认为出于性能原因，在内容之后加载 javascript 是最佳做法……很奇怪。
这是最佳实践。也许引导程序需要位于顶部？
Bootstrap JS 绝对不需要在页面顶部。

【解决方案2】：

This solution 似乎对我很有效。

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

【讨论】：

【解决方案3】：

jQuery UI 和 Bootstrap 都使用 tooltip 作为插件的名称。使用$.widget.bridge 为jQuery UI 版本创建一个不同的名称，并允许Bootstrap 插件保持命名工具提示（尝试在Bootstrap 小部件上使用noConflict 选项只会导致很多错误，因为它不能正常工作； that issue has been reported here):

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

【讨论】：

我在尝试这个时遇到 js 错误。 'undefined' is not an object (evaluating '$.widget.bridge')
covar - 你确定你已经导入了所有的 src 脚本吗？您使用的是较新版本的库吗？
@covard：重要的是你首先导入 jquery-ui，然后做 bridge 的事情，然后导入 bootstrap。
一个解决方案，如果你把所有东西都捆绑和缩小，这会很痛苦。没有办法把这个脚本放在中间。该死的，名字冲突垃圾。
如果你使用带有压缩代码的 webpack 包，你可以简单地将 jquery-ui 放在 bootstrap.js 之前

【解决方案4】：

改用 Bootstrap 弹出框怎么样？ BS 弹出框不会产生相同的冲突，尽管它们需要相同的 tooltip.js 组件。是的，它们更加风格化，但不会导致我的 JQuery UI 按钮出现问题。

我仅将 Jquery UI 用于自定义自动完成/组合框（因此不能声称其他 JQ-UI 控件正常），并且上述方法都无法解决组合框按钮在调用时变为“无样式”的 CSS 问题BS 工具提示。切换到 BS Popovers 提供了基本相同的效果，没有冲突，没有重新排序我的脚本导入，也不需要显式的桥接语句。

【讨论】：

这样，很务实
感谢您的提示，我同意，这是一种避免所有复杂性的解决方法。
伙计，这个人解决了所有的噩梦，看起来像柠檬一样甜！
弹出框不需要工具提示作为先决条件吗？

【解决方案5】：

这对我有用：

如果您需要使用 JQuery-UI 但又想使用引导程序的工具提示，只需从 website 获取自定义版本的 JQuery-UI。

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

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

【讨论】：

所以您仍然可以手动从每一侧下载资产文件，而不是使用 Bower 之类的工具？一般如何安装第三方库？在谷歌中搜索并从任何网站下载？
我不想使用引导工具提示，而是使用 UI 工具提示怎么样......他们是导致问题的任何方式。
简单，容易，非常适合我的情况。谢谢！ +1
为我工作 - 真的让我头疼不已 - 再加上一个 - 谢谢
最合理的答案，只要它建议只使用所需的功能。谢谢

【解决方案6】：

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

【讨论】：

这对我有用，是最简单的方法。我建议添加一个 HTML 注释，说明一个库必须在另一个之后加载。
有一天你会在使用这种方法的对话框中丢失关闭图标。 stackoverflow.com/questions/17367736/…
这个解决方案对我不起作用。使用 Chrome，我会“清除缓存并硬刷新”页面，并且工具提示有时会起作用，有时会不起作用（console.log 中没有错误）。刷新 30 次，产生 7 次工作效果。然后我去下载了一个自定义的 jQuery UI 包，现在当我“清除缓存和硬刷新”30 次时，我得到了 30 次工作结果，并且 0 个错误。我还要补充一点，我正在使用 require.js，因此我可以轻松控制加载库的顺序。
我爱你这个最简单的逻辑修复

【解决方案7】：

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

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

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

然后调用如下

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

【讨论】：

Official way$.fn.bstooltip = $.fn.tooltip.noConflict();

【解决方案8】：

如果您必须在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>jQuery.fn.tooltip = _tooltip;</script>

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

【讨论】：

在您的解决方案中，用户界面工具提示将被引导程序覆盖，但如果任何机构不想覆盖，则必须使用以前的解决方案
有一天你会在使用这种方法的对话框中丢失关闭图标。 stackoverflow.com/questions/17367736/…
很好的解决方案！
更清洁的解决方案。我正在修复一个在（共享）布局页面中加载了引导程序的页面，然后 jquery-ui 位于单个页面上。我不想将 jquery-ui 添加到所有页面（布局）只是为了获得正确的顺序。 jquery-ui（我假设）css覆盖引导css（字体很大，工具提示周围有一个白色块）仍然存在一些问题。但更接近。

【解决方案9】：

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

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

【讨论】：

【解决方案10】：

有一个简单而好的解决方案，只需像这样重新排列您的引导程序和 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。这对我有用。

【讨论】：

有一天你会在使用这种方法的对话框中丢失关闭图标。 stackoverflow.com/questions/17367736/…
它将用 bootstrap min 覆盖 ui 的所有常用属性，如果需要，不能同时使用两者

【解决方案11】：

另一种方法是下载自定义构建的 jquery UI。

排除不需要的内容，在本例中为工具提示。

可以从这里下载https://jqueryui.com/download/

这样你可以在任何地方包含它

【讨论】：