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

【问题标题】：How to create Bootstrap 5 drowdown with popover如何使用弹出框创建 Bootstrap 5 下拉菜单
【发布时间】：2021-07-10 05:59:26
【问题描述】：

我正在寻找一个带有弹出框的下拉按钮。菜单本身可以正常工作，但是一旦添加了弹出框，一旦单击，菜单就会保持在打开位置。我如何让下拉菜单和弹出框一起工作？

<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上创建了它

【问题讨论】：

标签： bootstrap-5

【解决方案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>

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

【讨论】：