4

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

我在页面上有几个：

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

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

4

4 回答 4

4

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

使用文档中建议的配置有效（参见小提琴）：

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>
于 2013-06-24T00:38:11.910 回答
1

.tooltip()功能在链接上启动工具提示效果，不显示工具提示

解释：

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

解决方案：

将此添加到您的代码中：

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

解决方案（JSFiddle）

于 2013-06-24T00:37:03.290 回答
1

我对按钮上的工具提示有同样的问题。事实证明，工具提示没有显示，因为该按钮第一次被禁用。在尝试显示检查其他值并启用按钮的工具提示之后，有代码。在第一次“运行”之后，按钮被启用，所以在第二个和后续事件中，工具提示确实/确实显示。我只是在尝试显示工具提示的代码之前移动了“启用”代码，我的问题就解决了。

于 2020-04-26T15:19:34.023 回答
-3

我认为如果让 JQuery 处理鼠标悬停事件并将所有代码放入 $(document).ready 会更干净

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

于 2013-06-24T00:44:09.780 回答