如何避免Bootstrap 5模态框关闭后按钮Tooltip重新显示？

这是因为模态框关闭时，触发它的按钮会自动重新获得焦点，而Bootstrap Tooltip的默认触发条件包含focus（默认触发方式为hover focus），因此会自动弹出Tooltip。以下是几种可行的解决办法：

方法1：监听模态框关闭事件，手动隐藏Tooltip #

利用Bootstrap模态框的hidden.bs.modal事件（模态框完全关闭后触发），调用Tooltip的hide方法强制隐藏按钮的Tooltip：

// 初始化页面上的所有Tooltip
const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
const tooltipList = tooltipTriggerList.map(el => new bootstrap.Tooltip(el))

// 获取目标模态框和触发按钮
const targetModal = document.getElementById('yourModalId')
const triggerBtn = document.getElementById('yourTriggerBtnId')

// 绑定模态框关闭事件
targetModal.addEventListener('hidden.bs.modal', () => {
  bootstrap.Tooltip.getInstance(triggerBtn).hide()
})

方法2：修改Tooltip的触发方式 #

如果你的Tooltip仅需要在鼠标悬停时显示，无需响应焦点事件，可以直接修改按钮的data-bs-trigger属性为hover：

<button type="button" 
        class="btn btn-primary" 
        data-bs-toggle="modal" 
        data-bs-target="#yourModalId"
        data-bs-toggle="tooltip" 
        data-bs-placement="top" 
        data-bs-trigger="hover" 
        title="Tooltip提示内容">
  打开模态框
</button>

方法3：阻止模态框关闭时按钮获取焦点 #

通过在模态框关闭后将焦点转移到其他元素（比如页面body），避免按钮因获得焦点触发Tooltip：

const targetModal = document.getElementById('yourModalId')
targetModal.addEventListener('hidden.bs.modal', () => {
  document.body.focus()
})

三种方法各有适用场景：方法1精准控制Tooltip状态，适合保留默认触发逻辑的场景；方法2配置最简单，仅需修改HTML属性；方法3从焦点触发的根源解决问题，适合需要保留Tooltip焦点触发但避免模态框关闭后误触发的场景。

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