单击元素后工具提示不会隐藏 (bootstrap v5.0)

Question

我将 bootstrap 版本从 4.5.x 更改为 5.0.1，并将工具提示的初始化从 $('[data-toggle="tooltip"]').tooltip({trigger: 'hover'}); 更改为至

let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl, {
        container: 'body'
    });
})

但是在点击显示工具提示的元素后工具提示仍然可见的问题在 5.0 版本中又回来了。我已经在版本 4.5.x 中用 $('[data-toggle="tooltip"]').tooltip("hide"); 解决了这个问题，但这在版本 5.

中不起作用

我试过了：

let tooltipElement = document.getElementById('myElementwithTooltip');
let tooltip = bootstrap.Tooltip.getInstance(tooltipElement);
tooltip.hide();
// or
tooltip.dispose();

但这并没有起到应有的作用。我在网站上有很多工具提示，其中一些会打开一个对话框，其中一些是作为数据表插件（具有排序功能）中列 header 的描述。

bootstrap website 上的工具提示也有同样的问题。单击元素后，工具提示不会消失。

如果有任何想法或建议，我将不胜感激。

Answer 1

如果您希望悬停时显示工具提示，请确保将 hover 指定为触发选项。

let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl, {
        container: 'body',
        trigger : 'hover'
    });
})

那么你就不会有点击问题了。

Codeply

此外，hide() 除非绑定到事件处理程序，否则不会像您展示的那样工作。

单击元素后工具提示不会隐藏 (bootstrap v5.0)

tooltip didn't hide after click on element (bootstrap v5.0)

javascript

tooltip

bootstrap-5

popper