解决 jeasyui 和 bootstrap 中 tooltip 的冲突

原创已于 2022-07-25 09:33:43 修改 · 489 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #javascript #jquery #easyui

于 2022-07-25 08:45:22 首次发布

在Bootstrap 5.2.0和EasyUI 1.10.4共用的项目中，由于两者都包含tooltip功能，可能导致EasyUI的tooltip失效。为了解决这个问题，可以在jQuery的$(document).ready()函数中，使用$.fn.tooltip.noConflict()恢复Bootstrap的tooltip方法，然后重新绑定EasyUI的tooltip。提供的代码示例展示了如何避免这种冲突。

问题的提出：

在实际代码的编写过程中，同时使用Bootstrap和EasyUI的时候，由于两个框架都有tooltip的扩展，会使EasyUI中的tooltip扩展失效并引发错误。

版本信息：Bootstrap 5.2.0，EasyUI 1.10.4，jQuery 3.6.0

可以使用下面的代码解决上述问题：

(function($) {
  $(document).ready(function() {
    var bsTooltip = $.fn.tooltip.noConflict();
    $.fn.bsTooltip = bsTooltip;
    $('[data-toggle="bsTooltip"]').bsTooltip();
  });
})(jQuery);