如何使用弹出框创建 Bootstrap 5 个下拉菜单

Question

我想创建一个带有弹出框的下拉按钮。菜单本身可以正常工作，但是一旦添加了弹出窗口，单击后菜单就会停留在打开位置。我如何让下拉菜单和弹出窗口一起工作？

<div class="btn-group">
  <button class="btn btn-primary" data-bs-toggle="tooltip" rel="nofollow" title="Make a GET request">GET</button>
  <button class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" data-bs-toggle-second="tooltip" title="Specify a format for the GET request">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li>
      <a class="dropdown-item" data-bs-toggle="tooltip" title="A title">An item</a>
    </li>
  </ul>
</div>

<script type="text/javascript">
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"], [data-bs-toggle-second="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>

我也在 JSFiddle

上创建了它

Answer 1

这是我能找到的最简单的解决方法。将切换和工具提示功能分开，它将按预期工作。

  <button class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
    <span class="sr-only" data-bs-toggle="tooltip" title="Specify a format for the GET updated">Toggle Dropdowns</span>
  </button>

这是我找到解决方案的想法Whosebug similar problem

如何使用弹出框创建 Bootstrap 5 个下拉菜单

How to create Bootstrap 5 drowdown with popover

bootstrap-5