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

问题描述

尝试将工具提示添加到已经使用 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 均无效。

有没有人有任何想法？谢谢

标签： javascripthtmltwitter-bootstraptooltip

FWIW...

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

数据-bs-trigger="悬停"

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

问题描述

解决方案

推荐阅读