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

【问题标题】：Bootstrap 5 - Dropdown AND Tooltip on Button?Bootstrap 5 - 按钮上的下拉菜单和工具提示？
【发布时间】：2021-08-28 17:06:28
【问题描述】：

尝试向已经使用 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 内添加跨度都没有用。

有人有什么想法吗？谢谢

【问题讨论】：

根据此评论，从可访问性的角度来看是不可能的：github.com/twbs/bootstrap/issues/33940#issuecomment-838454777
感谢链接。恕我直言，这是一个很大的失误 - 这是由于工具提示（和弹出框）作为 bs-data-toggle 的另一种变体实现的方式，而不是拥有自己的属性。几乎所有我会使用的工具提示/弹出框都是关于用户操作的（例如按钮、扭结等）。有点违背了目的......

标签： javascript html twitter-bootstrap tooltip

【解决方案1】：

FWIW...

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

data-bs-trigger="hover"

【讨论】：