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...

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

data-bs-trigger="hover"

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

1 个答案: