点击锚点打开新标签后Bootstrap Tooltip仍显示的问题解决咨询

这个问题我之前也碰到过，确实挺烦人的——毕竟谁也不想切回页面还看到个tooltip赖着不走😂。本质上是因为点击锚点打开新标签页时，浏览器只是把当前窗口放到后台，并没有触发tooltip原本的关闭触发事件（比如mouseleave），所以tooltip就一直停在那儿了。你之前试的tooltip('destroy')没生效，大概率是因为执行时机或者方式不对：销毁操作得确保tooltip实例还在，而且可能还没等销毁完成，浏览器已经切到新标签了，自然没效果。

下面给你几个实用的解决方案，按推荐度排序：

1. 点击锚点时手动隐藏Tooltip（最直接） #

不需要销毁实例，只需要在点击时临时关闭tooltip，既不影响锚点跳转，也不破坏tooltip的后续使用：

// Bootstrap 5 版本
$('a[data-bs-toggle="tooltip"]').on('click', function() {
  $(this).tooltip('hide');
  return true; // 必须返回true，保证锚点的href正常跳转
});

// Bootstrap 3/4 版本（把data-bs-toggle换成data-toggle即可）
$('a[data-toggle="tooltip"]').on('click', function() {
  $(this).tooltip('hide');
  return true;
});

2. 监听窗口焦点，切回页面时自动关闭所有Tooltip #

如果页面上有多个带tooltip的元素，或者担心有其他场景导致tooltip残留，可以给窗口加个focus监听，用户切回页面时自动关闭所有tooltip：

// Bootstrap 5 版本
$(window).on('focus', function() {
  $('[data-bs-toggle="tooltip"]').tooltip('hide');
});

// Bootstrap 3/4 版本
$(window).on('focus', function() {
  $('[data-toggle="tooltip"]').tooltip('hide');
});

额外注意：确保Tooltip初始化正确 #

有时候问题也可能出在初始化环节，这里给你贴个标准的初始化代码参考：

// Bootstrap 5 原生JS初始化（推荐）
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
const tooltipList = tooltipTriggerList.map(tooltipTriggerEl => {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

// Bootstrap 3/4 jQuery初始化
$('[data-toggle="tooltip"]').tooltip();

简单总结下：优先用第一种点击隐藏的方案，简单直接针对性强；如果需要全局兜底，再加上窗口焦点监听的方案。别用destroy啦，那是彻底废掉tooltip，完全没必要~

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