Javascript工具提示仅在第二次悬停时出现 [英] Javascript tooltip only appears on second hover

问题描述

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

I am using jQuery and Twitter Bootstrap, and want to have a tooltip appear when hovering over a link. However, the tooltip doesn't appear the first time I hover over a link, but if I move the mouse away and back on, it works every time for that link.

我在页面上有几个：

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

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

I've created a jsFiddle to demonstrate: jsFiddle. Any help would be appreciated - thanks in advance!

推荐答案

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

What's happening is that you're instantiating the plug-in on the element when you mouseover it the first time, and then the plug-in works as expected on subsequent mouseovers on that element.

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

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>

这篇关于Javascript工具提示仅在第二次悬停时出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！