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 内添加一个 span 都没有用。

有人有什么想法吗？感谢

Answer 1

FWIW...

正如@Supportic 指出的那样，向任何已经使用 bs-data-toggle 的按钮（或其他标签）添加弹出窗口是行不通的。但是为什么会有人想要一个按钮来触发弹出窗口...？
但是，以下内容适用于将鼠标悬停在文本（或其他标签）上 - 弹出窗口可以正确显示和隐藏。

data-bs-trigger="悬停"

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

Bootstrap 5 - Dropdown AND Tooltip on Button?

html

javascript

tooltip

twitter-bootstrap