1

我将引导程序版本从 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'
    });
})

但是在单击带有显示的工具提示的elememt后工具提示仍然可见的问题在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();

但这没有适当的帮助。我在网站上有很多工具提示，其中一些打开了一个对话框，其中一些是数据表插件（具有排序功能）中列标题的描述。

引导网站上的工具提示有同样的问题。单击元素后，工具提示不会消失。

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

4

1 回答 1

2

如果您希望工具提示悬停，请确保您指定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'
    });
})

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

代码

此外，hide()除非它绑定到事件处理程序，否则不会按照您显示的方式工作。

于 2021-05-20T14:54:36.513 回答