41

我有一个链接，当用户有一些新通知时，我将用作通知我将通过显示工具提示（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');​

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

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

4

2 回答 2

75

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

添加了“触发器”选项

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

然后，用这条线 

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

单击时销毁工具提示。

于 2012-10-24T09:57:46.810 回答
4

您可以添加一个变量来触发 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 错误。

于 2012-10-22T18:23:42.487 回答