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

Javascript tooltip only appears on second hover

本文关键字：悬停 显示 第二次 工具提示 Javascript      更新时间：2023-09-26

我正在使用jQuery和Twitter Bootstrap，并希望在悬停在链接上时显示工具提示。但是，工具提示不会在我第一次将鼠标悬停在链接上时出现，但如果我将鼠标移开并重新打开，它每次都适用于该链接。

我在页面上有几个：

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

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

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

使用文档中建议的配置工作（见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>

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

解释：

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

解决方案：

将此添加到您的代码中：

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

解决方案（JSFiddle）

我在按钮上的工具提示也遇到了同样的问题。结果工具提示没有显示，因为按钮第一次被禁用了。以下代码试图显示工具提示，该工具提示检查了一些其他值并启用了按钮。在第一次"运行"后，按钮被启用，因此在第二次和随后的事件中，工具提示确实会显示。我只是在试图显示工具提示的代码之前移动了"启用"代码，我的问题就解决了。

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

类似的问题和解决方案可以在这里找到：Jquery onmouseover在第二个事件上触发

相关文章：