Bootstrap 5 Tooltip点击触发模态框后无法隐藏问题求解

Bootstrap 5 Tooltip 点击后无法自动隐藏的核心原因是：

• 默认初始化下，Tooltip 的触发规则包含 hover 和 focus，点击绑定元素时，元素获得焦点会触发 Tooltip 显示
• 点击后模态框立即弹出，会抢占页面焦点、覆盖在原页面上层，原触发元素无法收到正常的失焦、鼠标移出事件，Tooltip 就会一直停留在显示状态
• 即使手动配置 trigger: 'hover'，点击瞬间鼠标仍停留在按钮区域时会触发 hover 态 Tooltip 显示，模态框弹出后鼠标被模态框遮挡，mouseleave 事件无法冒泡到原按钮，同样会导致 Tooltip 残留。

方案1：模态框弹出前主动隐藏已触发的Tooltip（推荐） #

这是稳定性最高、无副作用的方案，全局监听模态框的显示事件，在模态框弹出前统一隐藏所有已显示的Tooltip，不需要修改单个按钮的业务逻辑：

// 全局监听模态框显示事件
document.addEventListener('show.bs.modal', function () {
  // 遍历页面所有绑定了Tooltip的元素，隐藏对应实例
  document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(triggerEl => {
    const tooltipIns = bootstrap.Tooltip.getInstance(triggerEl)
    if (tooltipIns) tooltipIns.hide()
  })
})

如果是单个按钮触发模态框的场景，也可以在按钮点击逻辑里单独处理当前元素的Tooltip：

document.querySelector('#yourTriggerBtn').addEventListener('click', function() {
  // 隐藏当前按钮的Tooltip
  const currentTooltip = bootstrap.Tooltip.getInstance(this)
  if (currentTooltip) currentTooltip.hide()
  // 原有模态框弹出逻辑
  const targetModal = new bootstrap.Modal(document.getElementById('yourModalId'))
  targetModal.show()
})

方案2：精确配置Tooltip触发规则，禁用焦点触发 #

如果业务场景只需要鼠标悬浮时显示Tooltip，不需要点击、聚焦触发，可以在初始化时明确指定触发方式，移除默认的focus触发逻辑：

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(triggerEl => new bootstrap.Tooltip(triggerEl, {
  container: 'body',
  trigger: 'hover', // 仅保留hover触发，移除默认的focus、click触发规则
  delay: { show: 150, hide: 100 } // 可选配置显示/隐藏延迟，减少误触发
}))

注意：该方案无法完全规避点击瞬间鼠标停留在按钮上触发的hover态Tooltip残留，建议搭配方案1的全局监听逻辑使用，做到100%无残留。

方案3：通过CSS调整层级（临时修复方案） #

如果不想修改JS逻辑，可以通过样式把Tooltip的层级设置为低于Bootstrap模态框的默认层级（Bootstrap 5模态框默认z-index为1055），让Tooltip被模态框视觉遮挡：

.tooltip {
  z-index: 1050 !important;
}

该方案仅在视觉上隐藏了Tooltip，Tooltip实例实际仍处于显示状态，不推荐作为长期方案使用。

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