Bootstrap 5.x下拉菜单（Dropdown）与提示框（Tooltip）组合出现闪烁故障的原因咨询

我之前也碰到过一模一样的问题！这个闪烁跳转的根源在于你把Tooltip的触发元素嵌套在了Dropdown的触发容器里，两个组件的交互逻辑互相干扰了——当鼠标悬停时，Dropdown的内部状态变化会改变父元素的定位上下文，导致Tooltip第一次计算完正确位置后，又被迫重新计算并跳到错误的位置。

给你两个简单有效的解决方法：

方法一：修改Tooltip的挂载容器 #

这是最直接的解决方案，只需要在初始化Tooltip的时候添加container: 'body'选项，让Tooltip挂载到<body>标签下，脱离Dropdown的上下文，这样Dropdown的任何布局变化都不会影响它的定位了。

修改你的JavaScript代码如下：

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) 
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) { 
  return new bootstrap.Tooltip(tooltipTriggerEl, {
    container: 'body' // 核心配置：将Tooltip挂载到body上
  })
})

方法二：调整HTML结构 #

如果不想修改JS，也可以把Tooltip的触发元素从Dropdown的触发容器<div id="paa">里移出来，让两个元素的上下文完全独立，避免冲突。调整后的HTML示例：

<div class="dropdown">
  <!-- Dropdown触发容器 -->
  <div id="paa" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static"></div>
  
  <!-- Tooltip触发元素独立出来 -->
  <span data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
      <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
    </svg>
  </span>
  
  <span class="dropdown-menu dropdown-menu-override">
    <li><a class="dropdown-item" href="#">First Item</a></li>
    <li><a class="dropdown-item" href="#">Second Item</a></li>
    <li><a class="dropdown-item" href="#">Third Item</a></li>
    <li><a class="dropdown-item" href="#">Fourth Item</a></li>
    <li><a class="dropdown-item" href="#">Fifth Item</a></li>
  </span>
</div>

两种方法都能解决这个闪烁问题，个人更推荐第一种，不需要调整DOM结构，只需要一行配置就能搞定。

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