Javascript 为什么我的Bootstrap 5.x下拉列表/工具提示组合出现故障？

每当我将鼠标悬停在图标上方时，工具提示就会闪烁；这意味着工具提示显示在正确的位置，然后显示在错误的位置，并一直保持在那里，直到我刷新页面

我的

以下是我所拥有的：

HTML:

<div class="dropdown">
  <div id="paa" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
    <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>
  </div>
  <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>

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

#paa {
  margin: 1em;
}

#paa svg {
  width: 1.5em;
  fill: #008000;
}

.dropdown-menu-override {
  min-width: 0;
}

CSS:

<div class="dropdown">
  <div id="paa" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
    <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>
  </div>
  <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>

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

#paa {
  margin: 1em;
}

#paa svg {
  width: 1.5em;
  fill: #008000;
}

.dropdown-menu-override {
  min-width: 0;
}

---

这似乎是一个已经在beta 3中修复的问题

<div class="dropdown">
  <div id="paa" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
    <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>
  </div>
  <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>

---

太棒了。。。非常感谢。