如何使引导工具提示在单击链接之前保持可见答案

【问题标题】：How to make bootstrap tooltip remain visible till the link is clicked如何使引导工具提示在单击链接之前保持可见
【发布时间】：2012-10-22 16:12:43
【问题描述】：

我有一个链接，当用户有一些新通知时，我将用作通知我将通过显示工具提示（twitter 引导工具提示）来通知用户。我想要实现的是，在用户单击链接之前，该工具提示应该保持可见。一旦用户点击链接，工具提示就会被销毁。这就是我目前所拥有的，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');

那里发生了什么，工具提示在您将其悬停之前一直可见，并且在您将其悬停时采用其默认行为（悬停时显示）。

我希望我已经提供了正确的信息并明确了我想做的事情。

【问题讨论】：

如果您仍然使用 API 显示它，请尝试在创建工具提示时添加选项 trigger: 'manual'。
@millimoose 添加了该选项，现在它已经失去了默认行为。
用这一行解决 $('p a').on('click',function(){$(this).tooltip('destroy');});
是的，这就是我想要的。谢谢
@vikasdevde 您应该发布完整的解决方案作为答案并接受它。对于访客。

标签： javascript twitter-bootstrap tooltip

【解决方案1】：

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

添加了“触发器”选项

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

那么，用这一行

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

点击时销毁工具提示。

【讨论】：

这是我在谷歌搜索的内容，现在我得到了答案。非常感谢你:)
这个答案不再有效/工作，'show' 不再是 tooltip() 的选项
什么版本的 BS @satnam 其他几个人也证实这在最新版本中不再有效
你能用纯 JavaScript 做到这一点吗？我想让我的工具提示永远可见，直到世界末日。

【解决方案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'); });

这样，即使在鼠标离开之后，工具提示也会一直显示，直到单击链接。链接被点击后，tooltip被销毁，mouseleave页面依然不会产生javascript错误。

【讨论】：