如何避免jQuery与其他库冲突，解决CoreUI下Bootstrap Tooltip失效问题

冲突原因 #

CoreUI的JS包已内置基于Popper实现的Tooltip组件，默认会接管data-toggle="tooltip"属性的元素，同时会覆盖jQuery挂载的tooltip方法，所以会导致原版Bootstrap的jQuery Tooltip失效。

解决方案（二选一即可） #

方案1：使用CoreUI内置Tooltip（推荐） #

无需额外引入Bootstrap JS，和CoreUI生态完全兼容，无冗余代码：

1. 将所有Tooltip触发元素的data-toggle="tooltip"属性替换为data-coreui-toggle="tooltip"，title、data-placement等配置属性无需修改。
2. 替换初始化代码为CoreUI原生API写法：

// 原生JS写法（无需依赖jQuery）
document.addEventListener('DOMContentLoaded', function() {
  const tooltipTriggers = document.querySelectorAll('[data-coreui-toggle="tooltip"]')
  ;[...tooltipTriggers].forEach(el => new coreui.Tooltip(el))
})

// 兼容jQuery的写法
$(function () {
  $('[data-coreui-toggle="tooltip"]').each(function() {
    new coreui.Tooltip(this)
  })
})

方案2：保留原版Bootstrap jQuery Tooltip #

如果业务代码依赖原有Bootstrap Tooltip的实现，可通过命名空间备份解决冲突：

1. 调整脚本引入顺序，在CoreUI JS加载前备份Bootstrap的tooltip方法：

<script src="jQuery文件路径"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="Bootstrap JS文件路径"></script>
<script>
  // 备份原版Bootstrap的tooltip方法，避免被CoreUI覆盖
  $.fn.bootstrapTooltip = $.fn.tooltip
</script>
<script src="https://unpkg.com/@coreui/coreui/dist/js/coreui.min.js"></script>

2. 修改初始化代码调用备份的方法：

var $ = jQuery.noConflict();

$(window).on('load', function() { 
    $(function () {
      $('[data-toggle="tooltip"]').bootstrapTooltip()
    })
});

内容的提问来源于stack exchange，提问作者jade