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错误。

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

2 个答案: