JavaScript 工具提示只在第二次悬停时显示

Question

我正在使用jQuery和Twitter Bootstrap，并希望在悬停链接时出现工具提示。 然而，第一次悬停在链接上时，工具提示不会出现，但是如果我鼠标移开并再次悬停，那么它就能正常地运行。 我在页面上有几个这样的链接：

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

我创建了一个 jsFiddle 来演示：jsFiddle。非常感谢您的帮助！

- Andrey

Answer 1

发生的情况是，当您第一次将鼠标悬停在元素上时，即实例化插件，然后插件会在随后的鼠标悬停事件中按预期工作。

使用文档中建议的配置可以正常工作（请参见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>

- net.uk.sweet

Answer 2

我曾经遇到一个按钮上的工具提示同样的问题。原来，因为第一次按钮被禁用了，所以工具提示没有显示出来。在尝试显示工具提示之后，有些其他值被检查并启用了按钮的代码。在第一次“运行”之后，按钮被启用了，因此在第二次及后续事件中，工具提示会显示。我只需将“启用”代码移到尝试显示工具提示的代码之前，我的问题就解决了。

- Terrence M Meehan

Answer 3

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

说明：

当第一次悬停时触发$(this).tooltip()，它首先实例化插件。然后最终在第二次悬停时获取工具提示。

解决方案：

在您的代码中添加此内容：

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

解决方案（JSFiddle）

- Starx

Answer 4

我认为如果你让JQuery处理mouseover事件，并将所有代码放在$(document).ready中，会更加清晰。

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

- CalebC