如何解决如何避免 JQuery 与其他库冲突
我目前在我的 Laravel 8 项目中使用 Core Ui Admin Template。
Core Ui 的安装部分需要这些脚本。
script src="https://unpkg.com/@popperjs/core@2"
script src= "https://unpkg.com/@coreui/coreui/dist/js/coreui.min.js"
我还想使用 Bootstrap's Tooltip。我需要添加一个脚本来启用它。
var $ = jQuery.noConflict();
$(window).on('load',function() {
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
});
我的问题是它不起作用。而且我必须省略 coreui.min.js 脚本 才能使其工作。这个问题有什么提示吗? TIA。
解决方法
这有效
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
return new coreui.Tooltip(tooltipTriggerEl)
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.0/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/@coreui/coreui@3.4.0/dist/js/coreui.bundle.min.js"></script>
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。