jquery - 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 并亲自查看！

$("[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 include，它将开始工作：https ://jsfiddle.net/21v4zh3u/

标签： jquerycsstwitter-bootstrapjquery-uibootstrap-4

Answer 1

看起来 jQuery UI Tooltip & Bootstrap Tooltip 冲突是问题，在这里讨论，

jQueryUI 工具提示正在与 Twitter Bootstrap 竞争

解决方案是在jQuery UI之后链接 Bootstrap Bundle ，

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