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

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>