Bootstrap 5 如何实现Tooltip提示框可悬停且内部链接可点击

要实现鼠标悬停到Tooltip本身时保持可见，只需要修改默认初始化配置，新增少量事件监听即可，完整实现步骤如下：

核心配置说明 #

• 开启allowHTML: true配置，允许Tooltip内部渲染HTML元素，保证链接可正常点击
• 调整trigger为hover，同时设置delay.hide参数，给鼠标从触发元素移动到Tooltip预留足够的过渡时间
• 监听Tooltip的鼠标移入/移出事件，悬停时强制保持显示，离开后主动关闭

完整实现代码 #

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  // 初始化Tooltip，调整核心配置
  const tooltip = new bootstrap.Tooltip(tooltipTriggerEl, {
    allowHTML: true, // 允许内部HTML内容渲染
    trigger: 'hover',
    delay: {
      show: 0,
      hide: 300 // 隐藏延迟300ms，留够鼠标移到Tooltip的时间
    }
  })

  // 监听Tooltip显示事件，绑定Tooltip本身的交互逻辑
  tooltipTriggerEl.addEventListener('shown.bs.tooltip', function () {
    const tooltipEl = tooltip.getTipElement()
    // 鼠标移入Tooltip时，强制保持显示
    tooltipEl.addEventListener('mouseenter', function () {
      tooltip.hide()
      tooltip.show()
    })
    // 鼠标移出Tooltip时，关闭提示框
    tooltipEl.addEventListener('mouseleave', function () {
      tooltip.hide()
    })
  })

  return tooltip
})

使用示例 #

在触发元素的data-bs-title属性里直接写HTML链接代码即可：

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-title="<a href='#' >内部可点击链接</a>">
  悬停显示Tooltip
</button>

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