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

Question

每当我悬停在图标上时，工具提示就会出现故障；这意味着工具提示显示在正确的地方,然后显示在不正确的地方,并一直保持在那里,直到我刷新页面。

我的JSFiddle

以下是我的资料：

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>

JavaScript：

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

CSS：

#paa {
  margin: 1em;
}

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

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

Answer 1

这似乎是beta2中的一个bug，现在beta3中已经修复了。

<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>

使用beta 3的Fiddle
使用beta 3的Codeply