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

【问题标题】：Bootstrap 4.3.0 Tooltip Conflicts with jQuery UI 1.12.1Bootstrap 4.3.0 工具提示与 jQuery UI 1.12.1 冲突
【发布时间】：2019-11-06 09:28:22
【问题描述】：

我有一个奇怪的情况，包括 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 并亲自查看！

$("[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/

【问题讨论】：

控制台有错误吗？能否也包含整个文档。
控制台中没有错误，为了清楚起见，我将其添加到我的 OP 中。 tooltip(..) 执行没有问题。
@freedomn-m: data-original-title 不适用于工具提示。它应该有效，但它没有。我明白你关于浏览器工具提示的观点，所以问题是引导工具提示没有正确连接。
顺便说一下@freedomn-m，title 实际上是使用引导工具提示，请参见此处：tutorialrepublic.com/twitter-bootstrap-tutorial/…
关于标题的好点，但如果引导程序不起作用，那么它将显示为浏览器工具提示，这就是正在发生的事情

标签： jquery css twitter-bootstrap jquery-ui bootstrap-4

【解决方案1】：

看起来 jQuery UI 工具提示和引导工具提示冲突是问题，这里讨论，

jQueryUI Tooltips are competing with Twitter Bootstrap

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

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

【讨论】：

【解决方案2】：

在我看来，更好的解决方案是访问 jquery ui 网站并构建一个仅包含您想要/需要的 UI 组件的发行版。我遇到了同样的问题并取消了工具提示小部件，下载了生成的发行版，它解决了我的问题。

在花了一些时间尝试获得正确的 JS 文件顺序之后，这是一个更简单的解决方案，并且在未来不容易中断。

【讨论】：