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

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>

或者，以下 fiddle: 最初不起作用，但删除 jQuery UI 1.12.1 include，以及它会开始工作：https://jsfiddle.net/21v4zh3u/

Answer 1

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

jQueryUI Tooltips are competing with Twitter Bootstrap

解决方法是 link Bootstrap Bundle AFTER jQuery UI,

Answer 2

在我看来，更好的解决方案是访问 jquery ui 网站并创建一个仅包含 UI 组件的分发版 UI =14=]。我有同样的问题并取消选择工具提示小部件，下载生成的分发并解决了我的问题。

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

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

Bootstrap 4.3.0 Tooltip Conflicts with jQuery UI 1.12.1

css

jquery

jquery-ui

twitter-bootstrap

bootstrap-4