152

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

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

接着

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

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

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

4

12 回答 12

200

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

// 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>
于 2013-10-08T12:40:13.150 回答
77

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

于 2014-10-20T23:18:54.047 回答
35

如果您必须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 的工具提示并始终使用引导程序。

于 2016-08-04T22:12:22.603 回答
32

这对我有用：

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

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

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

于 2014-02-28T05:46:17.183 回答
20

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

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

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

然后调用它如下

$('.targetClass').bstooltip();
于 2016-06-09T12:34:25.823 回答
11

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

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

于 2013-12-17T09:41:37.530 回答
9

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

// handle jQuery plugin naming conflict between jQuery UI and Bootstrap
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);
于 2013-06-04T03:25:25.113 回答
3

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

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

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

于 2012-12-05T20:15:03.983 回答
3

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

于 2017-08-22T14:01:09.430 回答
1

An easy way is to load bootstrap.js after jquery-ui.js, so that the bootstrap .tooltip overrides jquery UI's. If you're using a module loader like requirejs, then you could make bootstrap dependent upon jquery-ui, as such: 

requirejs.config({
    baseUrl: 'js',
    waitSeconds: 30,
    shim: {
        'bootstrap': {
            deps: [ 'jquery', 'jquery-ui' ]
        },...
于 2017-06-30T23:14:17.153 回答
0

万一你...

  1. 不想在 jQuery UI 和
  2. $.widget.bridge并且noConflict不为你工作
  3. 您不想覆盖 jQuery UI 工具提示

那么另一种重新启用引导工具提示的方法如下：

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

<script>
    var bsTooltip = $.fn.tooltip;
</script>

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

然后您可以通过这种方式初始化引导工具提示：

// initialize tooltips
bsTooltip.call( $( "[data-toggle='tooltip']" ) );
于 2022-02-18T16:09:01.040 回答
0

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

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

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

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

于 2021-06-08T07:52:05.953 回答