Question

我遇到一个奇怪的情况，其中包括jQuery UI 1.12.1会破坏我的Bootstrap 4.3.0工具提示。

参见下文：此工具提示

<i class="fas fa-question-circle" rel="tooltip" data-placement="right" 
   data-original-title="My tooltip"></i>

具有初始化$("[rel=tooltip]").tooltip({html:true});

可以在不包含jQuery UI 1.12.1的情况下工作，但是会破坏它。

注意控制台上没有错误。 tooltip（）成功执行，没有问题。

注释掉jQuery UI 1.12.1 include并亲自看看！

$("[rel=tooltip]").tooltip({html:true});

.fa-question-circle:before {
    content: "\f059";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.js"></script>
<!-- THIS LINE MAKES IT BREAK! INCLUDING jQUERY UI 1.12.1 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<i class="fas fa-question-circle" rel="tooltip" data-placement="right" data-original-title="My tooltip"></i>

或者，以下小提琴：最初不起作用，但是删除了 jQuery UI 1.12.1包含，它将开始起作用：https://jsfiddle.net/21v4zh3u/

Answer 1

看起来像jQuery UI Tooltip和Bootstrap Tooltip冲突是一个问题，在这里讨论

jQueryUI Tooltips are competing with Twitter Bootstrap

解决方案是链接Bootstrap Bundle AFTER jQuery UI，

https://stackoverflow.com/a/26476505/1005607

Answer 2

在我看来，更好的解决方案是转到jquery ui网站，并仅使用您想要/需要的UI组件来构建发行版。我遇到了同样的问题，取消选择了工具提示小部件，下载了最终的发行版，就解决了我的问题。

花了一些时间试图使JS文件顺序正确之后，这是一个简单得多的解决方案，将来不易被破坏。

Bootstrap 4.3.0工具提示与jQuery UI 1.12.1冲突

2 个答案: