Question

我正在尝试在引用 jQueryUI 和 Bootstrap 3 的View上使用tooltip。我做了一个样本here。如果我在jQueryUI的js之后加载Boostrap然后tooltip()调用成功但是如果我在Bootstrap之后调用jQueryUI那么我得到一个错误并且没有任何作用。你可以自己尝试一下。互联网上有很多关于此的讨论，我问GitHub，但我找不到解决方案。

Answer 1

理想的解决方案是在没有工具提示的情况下使用QueryUI。这会奏效。如果您不想这样做，请在JQueryUI之后包含Bootstrap。确保每个组件都有唯一的组件（您可以使用所需组件自定义构建两个库）

Bootstrap可以重置任何组件，如：

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

上面的代码在JQueryUI

之后加载bootstrap时会起作用

参考：http://getbootstrap.com/javascript/

以下是Bootstrap的相关代码：

  var old = $.fn.tooltip

  $.fn.tooltip = function (option) {
    ....
  }


  $.fn.tooltip.noConflict = function () {
    $.fn.tooltip = old
    return this
  }

Answer 2

不包括jquery-ui.js，而是根据需要包含单个库，并省略jquery-ui工具提示。

例如，如果您只需要jquery-ui sortable，那么请使用：

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-ui/ui/core.js"></script>
<script src="bower_components/jquery-ui/ui/widget.js"></script>
<script src="bower_components/jquery-ui/ui/mouse.js"></script>
<script src="bower_components/jquery-ui/ui/sortable.js"></script>

Answer 3

最简单的解决方案首先是 jquery-ui.js ，然后是 bootstrap-datepicker.js 这对我有用。

Bootstrap和jQueryUI冲突

3 个答案: