JQueryUI 工具提示正在与 Bootstrap 竞争

我已经能够得到一些工具提示，以工作 终于与以下代码:

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

然后

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

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

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

73094 次浏览
小开

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

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

第三，检查 jQueryUI 包()) ，看看是否可以下载一个不包含工具提示的版本(我检查过了，这是完全可行的)。

小开

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

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

JQueryUI 和 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-ui.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>
小开

用 Bootstrap 泡芙代替怎么样？虽然 BS popover 需要相同的 tooltip.js 组件，但它们不会产生相同的冲突。是的，它们更加程式化，但不会导致我的 JQueryUI 按钮变得不稳定。

我使用 Jquery UI 只是为了自定义自动完成/组合框(所以不能声称其他 JQ-UI 控件是 OK 的) ，而且上述方法都不能解决组合框按钮在调用 BS 工具提示时变得“未样式化”的 CSS 问题。切换到 BS Popover 实际上提供了相同的效果，没有冲突，没有对脚本导入的重新排序，也不需要显式的桥接语句。

小开

这对我很有效:

如果您需要使用 JQuery-UI，但又想使用 bootstrap 的工具提示，只需从这个 网站中获得一个定制版本的 JQuery-UI。

只需取消选中“ Tooltip”选项，并下载它(它将类似于“ jquery-ui-1.10.4. custom.js”)。

只需将它添加到您的项目中，而不是您目前正在使用的版本，您就可以开始派对了。这样可以避免冲突。对我来说就像施了魔法一样！

小开

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

小开

假设 UI 将在初始化引导后调用

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

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

那就这么说吧

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

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

小开

一种简单的方法是在 jquery-ui 之后加载 bootstrap.js。Js 这样引导程序。工具提示覆盖 jquery UI 的。如果您使用的是诸如 requjs 之类的模块加载程序，那么您可以让 bootstrap 依赖于 jquery-ui，例如:

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

有一个简单而好的解决方案，只需重新安排您的引导和 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 就可以了。

小开

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

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

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

这样你就可以把它放在任何地方

小开

万一你..。

  1. 不想在 jQueryUI 和
  2. $.widget.bridge和 noConflict不适合你
  3. 您不希望覆盖 jQueryUI 工具提示

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

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


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


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

然后你可以这样初始化 bootstrap 工具提示:

// initialize tooltips
bsTooltip.call( $( "[data-toggle='tooltip']" ) );
小开

假设在初始化 Bootsrap 之后 UI 将被调用(并且您不能更改 Bootstrap > > UI 的顺序) ，那么在 Bootstrap 导入之后放置:

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

毕竟:

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

所以当你使用 $(".selector").tooltip()的时候，它会是 Bootstrap 的。而且您仍然可以在 $(".selector").uitooltip()中使用 UI 版本。


提交答案