Bootstrap 5 - 按钮上的下拉菜单和工具提示？

Question

尝试向已使用 data-bs-toggle 的 btn（或任何其他标签）添加工具提示 - 我能得到的最佳结果如下：

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


    <div class="dropdown">
    <button id="sandbox-tooltip"
        class="btn btn-primary dropdown-toggle"
        type="button"
        data-bs-toggle="dropdown"
        data-bs-toggle-second="tooltip"
        data-bs-placement="right"
        title="tooltip info ...">Tooltip Button
    </button> 

结果：

• 悬停时，显示工具提示
• 第一次点击时，没有任何反应
• 第二次单击时，显示下拉项目
• 单击远离 btn 时，工具提示会消失，但下拉项不会消失

其他： 我试过：

• 将 btn 包装在 div 中并向其中添加工具提示代码
• 使用工具提示代码在 btn 内添加一个跨度 都不起作用。

有人有什么想法吗？谢谢

Answer 1

FWIW...

1. 正如@Supportic 所指出的，向任何已经使用 bs-data-toggle 的按钮（或其他标签）添加弹出框是行不通的。但为什么有人想要一个按钮来触发弹出窗口......？

2. 但是，以下方法适用于将鼠标悬停在文本（或其他标签）上 - 弹出窗口可以正确显示和隐藏。

   data-bs-trigger=“悬停”

Answer 2

由于接受的答案实际上并没有回答所提出的问题，而是提供了替代解决方案，这并不总是一个选项 - 以下是如何在 Bootstrap 5 中的元素上启用下拉菜单和工具提示：

<!-- Add Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<!-- Add Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">

<!-- Some explanatory wrapping -->
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<div class="container-fluid py-5">
   <h1 class="display-5 fw-bold">Bootstrap 5 Tooltip with Dropdown Example</h1>
   <p class="col-md-8 fs-4">Bootstrap gives you easy and powerful way to accomplish mostly anything.</p>

<p>Here we can use any of the 4 possible drop*:  <strong>dropdown</strong>, <strong>dropup</strong>, <strong>dropstart</strong>, or <strong>dropend</strong>.

<!-- The IMPORTANT STUFF START -->
<div class="btn-group dropup" data-bs-toggle="tooltip" data-bs-title="Click the icon to show dropdown.">
  <i class="bi bi-info-circle-fill"
     data-bs-toggle="dropdown"
     data-bs-popper-config='{"strategy":"fixed"}'
     aria-expanded="false"></i>
  <div class="dropdown-menu">
    <div class="table-responsive m-2">
    <table class="table table-secondary table-sm table-bordered table-striped table-hover">
    <thead>
    <tr><th>Col 1</th><th>Col 2</th></tr>
    </thead>
    <tbody>
    <tr><td>Row 1, Col 1</td><td>Row 1, Col 2</td></tr>
    <tr><td>Row 2, Col 1</td><td>Row 2, Col 2</td></tr>
    <tr><td>Row 3, Col 1</td><td>Row 3, Col 2</td></tr>
    </tbody>
    </table>
    </div>
  </div>
</div>
<!-- The IMPORTANT STUFF END -->


</div>
</div>


<!-- Add Popper & Bootstrap 5 CSS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>

<script>
document.addEventListener("DOMContentLoaded", (event) => {
  // Enable BS Tooltips 
  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
  const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
});
</script>