首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >引导4.3.0工具提示与jQuery UI 1.12.1冲突

引导4.3.0工具提示与jQuery UI 1.12.1冲突
EN

Stack Overflow用户
提问于 2019-06-24 14:34:47
回答 2查看 3.7K关注 0票数 3

我有一个奇怪的例子,其中包括jQuery UI 1.12.1破坏了我的引导4.3.0工具提示。

见下面:这个工具提示

代码语言:javascript
代码运行次数: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包含的情况下工作,但会中断它。

注意控制台上没有错误。工具提示()正在顺利地执行,没有问题。

注释掉jQuery UI 1.12.1包含并亲自查看!

代码语言:javascript
代码运行次数:0
运行
复制
$("[rel=tooltip]").tooltip({html:true});
代码语言:javascript
代码运行次数:0
运行
复制
.fa-question-circle:before {
    content: "\f059";
}
代码语言:javascript
代码运行次数:0
运行
复制
<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/

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-06-24 16:01:54

看起来像jQuery UI工具提示&引导工具提示冲突是问题所在,在这里讨论,

jQueryUI Tooltips are competing with Twitter Bootstrap

解决方案是在 jQuery UI之后将Bootstrap Bundle链接起来,

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

票数 5
EN

Stack Overflow用户

发布于 2020-11-25 15:48:41

在我看来,更好的解决方案是转到jquery网站,并构建一个只包含您想要/需要的ui组件的发行版。我有同样的问题,取消选择工具提示小部件,下载结果发行版,它解决了我的问题。

在花了一段时间试图获得正确的JS文件顺序之后,这是一种简单得多的解决方案,而且不会在将来崩溃。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56738842

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档