jQueryUI 工具提示与 Twitter Bootstrap 相互竞争。

Question

我最终使用以下代码成功地实现了一些工具提示：

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

然后

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

我遇到的问题是它正在使用jQueryUI工具提示（没有箭头，很丑的工具提示），而不是Bootstrap。

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

- markdotnet

---

你需要这两个东西吗？ - Matt

不需要...我只想要Bootstrap工具提示。 - markdotnet

抱歉，我的意思是您需要同时使用jQuery UI和Bootstrap吗？ - Matt

是的...看起来Bootstrap.js的东西至少在某种程度上依赖于jQueryUI的东西。如果没有jQuery，Bootstrap的东西就不能工作。 - markdotnet

这个对我有用，看看这个答案。 - Poncho

@markdotnet：不正确。Bootstrap需要核心JQuery库，而不是JQuery.UI。 - Ian Kemp

Answer 1

jQuery UI和Bootstrap都使用tooltip作为插件的名称。使用$.widget.bridge为jQuery UI版本创建一个不同的名称，并允许Bootstrap插件保持命名为tooltip（尝试在Bootstrap小部件上使用noConflict选项只会导致很多错误，因为它无法正常工作；该问题已在此处报告）：

$.widget.bridge('uitooltip', $.ui.tooltip);

所以让它正常工作的代码是：

<!-- Import jQuery and jQuery UI first -->
<script src="/js/jquery.js"></script>
<script src="/js/jquery-ui.js"></script>

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

<!-- Then import Bootstrap -->    
<script src="js/bootstrap.js"></script>

JQuery工具提示可以通过以下方式实例化：

$('.someclass').uitooltip();

很好的复制粘贴代码，还能处理按钮冲突。

<script src="/js/jquery.js"></script>
<script src="/js/jquery-ui.js"></script>

<script>
  $.widget.bridge('uibutton', $.ui.button);
  $.widget.bridge('uitooltip', $.ui.tooltip);
</script>

<script src="/js/bootstrap.js"></script>

- The Demz

---

当我尝试这个时，我遇到了一个 JavaScript 错误。'undefined' 不是一个对象（在评估 '$.widget.bridge' 时）。 - covard

covar - 你确定已将所有源脚本导入了吗？并且你是否在使用较新版本的库？ - The Demz

@covard：首先导入jquery-ui很重要，然后进行“bridge”操作，最后再导入bootstrap。 - Joshua Muheim

如果你已经将一切捆绑和压缩，那么一个解决方案可能会让你痛苦。没有办法将这个脚本放在中间。该死，名称冲突垃圾。 - Piotr Kula

如果您正在使用Webpack捆绑包和压缩代码，那么您可以在bootstrap.js之前放置jquery-ui。 - Raj

Answer 2

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

- Stefan Musarra

---

这对我有用，也是最简单的方法。我建议添加一个HTML注释，说明必须在另一个库加载后加载它。 - Paul

有一天，如果你使用这种方法，打开对话框时将找不到关闭图标。https://dev59.com/YGQm5IYBdhLWcg3wwxLF - Oleksii Kyslytsyn

这个解决方案对我没用。在使用Chrome时，我会“清除缓存并强制刷新”页面，有时工具提示会起作用，有时不会（控制台中没有错误）。刷新30次产生了7次有效结果。然后我去下载了一个定制的jQuery UI包，现在当我“清除缓存并强制刷新”30次时，我得到了30次有效结果，没有错误。我还要补充一点，我正在使用require.js，所以我可以轻松地控制库加载的顺序。 - HPWD

我为这个最简单的逻辑修复而爱你。 - Milind

Answer 3

如果你必须在 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的提示，始终使用bootstrap的提示。

- supersan

---

在您的解决方案中，UI提示将被Bootstrap覆盖，但如果有人不想覆盖，则必须使用先前的解决方案。 - Projesh Pal

有一天，如果你使用这种方法，对话框中的关闭图标会消失。 - Oleksii Kyslytsyn

很棒的解决方案！ - Ivan Ferrer

更加清晰的解决方案。我正在修复一个页面，该页面在（共享）布局页面中加载了bootstrap，而jquery-ui则在单独的页面上。我不想将jquery-ui添加到所有页面（布局）中，只是为了正确排序。 仍然存在一些问题，jquery-ui（我认为）css覆盖了bootstrap css（字体很大，并且工具提示周围有白色块）。但是已经接近解决。 - FinrodFelagund

Answer 4

这对我非常有效:

如果您需要使用JQuery-UI但想要使用Bootstrap的工具提示，只需从此网站获取自定义版本的JQuery-UI。

只需取消勾选“Tooltip”选项并下载它（它将是类似于“jquery-ui-1.10.4.custom.js”的内容）。

将其添加到项目中，替换您当前正在使用的版本，然后您就可以愉快地使用了。这将避免冲突。对我而言，它像魔法一样奏效！

- Poncho

---

那么你仍然手动从每个站点下载资产文件，而不是使用像 bower 这样的工具吗？通常你如何安装第三方库？在 Google 中搜索并从任何网站下载它吗？ - user3746259

我不想使用Bootstrap的工具提示，而是使用UI自带的工具提示，毕竟它们才是问题的根源。 - Piotr Kula

简单易用，非常适合我的情况。谢谢！+1 - Chris Kempen

对我有用 - 我一直在为此感到非常苦恼 - 加一 - 谢谢 - gchq

只要建议采取所需功能，最合理的答案。谢谢。 - Oleksii Kyslytsyn

很抱歉，这意味着您不能使用CDN。 - jg2703

Answer 5

假定 UI 在引导程序初始化后被调用

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

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

然后按以下方式进行调用

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

- Projesh Pal

---

官方方式 $.fn.bstooltip = $.fn.tooltip.noConflict(); - Igor Jerosimić

Answer 6

如何考虑仅使用 Bootstrap popovers？ BS popovers 不会产生相同的冲突，尽管它们需要相同的 tooltip.js 组件。是的，它们更加风格化，但不会导致我的 JQuery UI 按钮出现异常。

我仅使用 Jquery UI 自定义自动完成/组合框（因此不能声称其他 JQ-UI 控件可以），上述任何方法都无法修复 CSS 问题，即调用 BS Tooltips 时组合框按钮变为“未设置样式”。切换到 BS Popovers 提供了基本相同的效果，没有冲突，没有对脚本引入进行重新排序，并且不需要明确的桥接语句。

- AgonyOfVictory

---

像这样，非常实用。 - Mark Stratmann

谢谢您的提示，我同意，这是一种避免所有复杂性的解决方法。 - Tom

这个解决了所有的噩梦，看起来像柠檬一样甜美！ - Piotr Kula

弹出框不需要先决条件为工具提示吗？ - MrKobayashi

Answer 7

这个解决方案对我来说似乎很有效。

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

- Public Profile

Answer 8

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

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

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

- Matt

---

所以这很奇怪...我按照相同的顺序加载JavaScript库，但当我遇到问题时，我是在<body>标签之前加载jquery-ui库，而在所有内容之后加载bootstrap.js。我将bootstrap.js移到了我的内容上方（但仍在jquery-ui.js之后），现在它正在呈现像我期望的那样的工具提示。我希望这不会破坏我的网站宇宙。我认为出于性能原因，最好在内容之后加载JavaScript...奇怪。 - markdotnet

最佳实践是这样的。也许引导程序需要放在顶部？ - Matt

Bootstrap JS 绝对不需要放在页面顶部。 - Paul Phillips

Answer 9

有一个简单且好用的解决方案，只需重新排列您的bootstrap和jquery ui文件链接，像这样：

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

只需在加载bootstrap js文件前加载jQueryui即可。这对我有效。

- Sanjib Debnath

---

有一天，如果你使用这种方法，你会发现在对话框中缺少关闭图标。https://dev59.com/YGQm5IYBdhLWcg3wwxLF - Oleksii Kyslytsyn

它将覆盖所有常见的UI属性，使用Bootstrap min，并且如果需要，不能同时使用两者。 - Projesh Pal

Answer 10

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

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

- Andrew