如何使引导工具提示保持可见，直到单击链接

Question

我有一个链接，当用户有一些新通知时，我将使用该链接作为通知，我将通过显示工具提示（twitter bootstrap 工具提示）来通知用户。我想要实现的是，该工具提示应保持可见，直到用户单击链接。一旦用户单击链接，工具提示就会销毁。 这就是我到目前为止所拥有的，http://jsfiddle.net/testtracker/QsYPv/

HTML

<p><a href="#" rel="tooltip" data-original-title="you have 2 notifications">Notification</a>.</p>​

JavaScript

$('p a').tooltip({placement: 'bottom'}).tooltip('show');​

发生的情况是，工具提示在您悬停它之前保持可见，并在您悬停它后采取默认行为（悬停时显示）。

我希望我已经提供了正确的信息并明确了我想要做什么。

Answer 1

这是解决方案http://jsfiddle.net/testtracker/QsYPv/8/

添加了“触发”选项

$('p a').tooltip({placement: 'bottom',trigger: 'manual'}).tooltip('show');

然后，用这条线

$('p a').on('click',function(){$(this).tooltip('destroy');});

单击时销毁工具提示。

Answer 2

您可以添加一个变量来触发 mouseleave 事件以重新显示工具提示，然后正如您在评论中所说，只需在单击时销毁工具提示，这样当您再次将鼠标悬停时它就不会显示：

var clickedNotify = false;
$('p a').tooltip({placement: 'bottom'}).tooltip('show');
$('p a').mouseleave(function() { if (!clickedNotify) { $('p a').tooltip({placement: 'bottom'}).tooltip('show'); } });
$('p a').click(function() { clickedNotify = true; $(this).tooltip('destroy'); });

这样，即使在鼠标离开之后，工具提示也会始终显示，直到单击链接为止。点击链接后，工具提示被销毁，但在 mouseleave 上仍然不会在页面上生成 javascript 错误。

Answer 3

对于 bootstap 5 你可以使用：

    // get all tooltips
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
    // loop trough tooltips
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => {
        const tooltip = new bootstrap.Tooltip(tooltipTriggerEl);
        // make tooltips visible on load
        tooltip.show()
        // keep tooltips in view
        tooltipTriggerEl.addEventListener('hide.bs.tooltip', (e) => {
            e.preventDefault()
        })
        return tooltip
    })