如何避免 JQuery 与其他库冲突

Question

我目前正在 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.

Answer 1

这个有效

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>

如何避免 JQuery 与其他库冲突

How to avoid JQuery conflict with other library

jquery

core-ui