Bootstrap tooltip点击跳转第二页后不隐藏的原因及解决办法

问题原因 #

Bootstrap tooltip默认会在触发元素绑定hover、focus双触发事件，只有元素失去焦点、鼠标移出时才会自动隐藏已生成的tooltip DOM节点。如果你用的是单页应用（SPA）前端路由跳转，点击按钮跳转时不会触发页面全局重载，元素的mouseleave、blur事件未被触发，已经渲染到页面上的tooltip节点就会残留，跳转新页面后依然可见。
另外你提供的HTML代码中，a标签同时写了data-toggle="tooltip"和自定义tooltip属性，重复初始化tooltip实例也可能导致自动销毁逻辑失效。

解决方法 #

你可以根据自己的项目场景任选以下方案修复：

• 点击跳转前手动隐藏当前触发的tooltip，绑定全局点击事件即可：

$('[data-toggle="tooltip"]').on('click', function () {
  $(this).tooltip('hide')
})

• 修改tooltip触发规则，仅保留hover触发，去掉focus触发，避免点击后因为元素仍处于聚焦状态不消失，初始化时添加配置项：

$('[data-toggle="tooltip"]').tooltip({
  trigger: 'hover'
})

• 单页应用可以在全局路由跳转钩子中统一销毁所有tooltip实例，彻底避免残留，以Vue路由为例：

router.beforeEach((to, from, next) => {
  $('[data-toggle="tooltip"]').tooltip('dispose')
  next()
})

• 清理HTML中冗余的tooltip自定义属性，避免tooltip重复初始化。

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