Question

我正在使用jQuery和Twitter Bootstrap，并且希望在将鼠标悬停在链接上时显示tooltip。但是，当我第一次将鼠标悬停在链接上时，工具提示不会显示，但如果我将鼠标移开并重新打开，则每次都会对该链接起作用。

我在页面上有几个：

<a href="#" onmouseover="$(this).tooltip();" class="postAuthor" data-original-title="@username">Full Name</a>

我创建了一个jsFiddle来演示：jsFiddle。任何帮助将不胜感激 - 提前感谢！

Answer 1

当您第一次将鼠标悬停在元素上时，您正在实例化该元素上的插件，然后插件在该元素上的后续鼠标悬停时按预期工作。

使用docs中建议的配置（请参阅fiddle）：

<强> JavaScript的：

// tooltip demo
$('div').tooltip({
  selector: "a[data-toggle=tooltip]"
})

<强> HTML：

<div style="text-align: center; width: 100%; margin-top: 50px;">
    <a href="#" data-toggle="tooltip" class="postAuthor" data-original-title="@username">Full Name</a>    <p/><p/>
    <a href="#" data-toggle="tooltip" class="postAuthor" data-original-title="@username">Full Name</a><p/>
    <a href="#" data-toggle="tooltip" class="postAuthor" data-original-title="@username">Full Name</a><p/>
    <a href="#" data-toggle="tooltip" class="postAuthor" data-original-title="@username">Full Name</a><p/>
    <a href="#" data-toggle="tooltip" class="postAuthor" data-original-title="@username">Full Name</a>
</div>

Answer 2

.tooltip()函数会在链接上启动工具提示效果，而非显示工具提示

<强>解释

在第一个悬停时触发$(this).tooltip()时，它首先实例化插件。然后最后在第二次悬停时你会得到工具提示。

<强>解决方案：

在您的代码中添加：

$(function() {
    $("a").tooltip();
});

Solution (JSFiddle)

Answer 3

在按钮上出现工具提示时，我遇到了同样的问题。原来，工具提示没有显示，因为该按钮是第一次禁用的。有代码跟随尝试显示工具提示，该提示检查了其他一些值并启用了按钮。在第一个“运行”之后，启用了按钮，因此在第二个及以后的事件中工具提示确实/确实显示。我只是将“启用”代码移到了试图显示工具提示的代码之前，并且解决了我的问题。

Answer 4

我认为如果让JQuery处理mouseover事件并将所有代码放在$（document）.ready

中会更干净

类似的问题和解决方案可以在这里找到： Jquery onmouseover triggers on second event

Javascript工具提示仅在第二次悬停时出现

4 个答案: