Bootstrap Tooltip无法自动消失问题排查求助

你的代码里存在几个核心问题，直接导致了Tooltip偶尔无法消失的随机现象：

具体问题点 #

• 重复创建Tooltip实例
  你同时用两种方式初始化同一批[data-bs-toggle="tooltip"]元素：

  1. jQuery方式：$('[data-bs-toggle="tooltip"]').tooltip({trigger: 'hover'});
  2. 原生JS方式：new bootstrap.Tooltip(tooltipTriggerEl)
     同一个元素绑定多个Tooltip实例后，触发隐藏事件时可能只有部分实例响应，剩余实例对应的Tooltip DOM会留在页面上，哪怕切换页面也不会自动消失。

• 冗余事件绑定干扰原生逻辑
  你额外给[data-bs-toggle="tooltip"]绑定了mouseout和click事件强制隐藏，但Bootstrap的hover触发已经内置了鼠标移出自动隐藏的逻辑。重复绑定事件会打乱原生事件流，导致某些场景下隐藏信号无法正确传递到所有实例。

• 表格刷新时未清理旧实例
  在#lst_art_adm的all.bs.table事件里，每次表格刷新都会重复初始化[data-toggle="tooltip"]的Tooltip/Popover，旧实例未被销毁，叠加后会出现Tooltip残留。

• 页面切换时未主动销毁实例
  单页应用切换页面时，原页面的Tooltip元素会被移除DOM，但Bootstrap Tooltip默认会把Tooltip节点插入到<body>中。如果没有主动销毁这些实例，对应的Tooltip DOM会一直留在页面上。

修复建议 #

1. 统一初始化方式，避免重复创建
   选一种方式初始化（jQuery或原生JS二选一），初始化前先销毁已存在的实例：

   • jQuery方式：

     // 先销毁旧实例，再初始化
     $('[data-bs-toggle="tooltip"]').tooltip('dispose').tooltip({
         trigger: 'hover'
     });
     

   • 原生JS方式：

     const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
     tooltipTriggerList.forEach(el => {
         // 销毁已存在的实例
         bootstrap.Tooltip.getInstance(el)?.dispose();
         // 创建新实例
         new bootstrap.Tooltip(el, {trigger: 'hover'});
     });
     

2. 移除冗余的事件绑定
   删掉mouseout和click的强制隐藏事件，Bootstrap原生的hover触发逻辑已经足够处理这些场景，额外绑定反而容易冲突。

3. 表格刷新时清理旧实例
   在all.bs.table事件中，先销毁旧的Tooltip/Popover实例，再重新初始化：

   $('#lst_art_adm').on('all.bs.table', function (e, name, args) {
       $('[data-toggle="tooltip"]').tooltip('dispose').tooltip();
       $('[data-toggle="popover"]').popover('dispose').popover();
   });
   

4. 页面切换时全局清理实例
   在单页应用的路由变化钩子（如Vue的beforeRouteLeave、React的useEffect清理函数）中，销毁所有Tooltip实例：

   // jQuery方式
   $('[data-bs-toggle="tooltip"]').tooltip('dispose');
   $('[data-toggle="tooltip"]').tooltip('dispose');
   
   // 原生JS方式
   document.querySelectorAll('[data-bs-toggle="tooltip"], [data-toggle="tooltip"]').forEach(el => {
       bootstrap.Tooltip.getInstance(el)?.dispose();
   });
   

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