Javascript工具提示仅在第二次hover时出现
我正在使用jQuery和Twitter Bootstrap,并希望在将鼠标hover在链接上时显示工具提示 。 但是,当我第一次将鼠标hover在链接上时,工具提示不会出现,但如果我将鼠标移开并重新打开,则每次都会对该链接起作用。
我在页面上有几个这样的:
Full Name
我已经创建了一个jsFiddle来演示: jsFiddle 。 任何帮助将不胜感激 – 提前感谢!
发生的事情是,当您第一次将鼠标hover在元素上时,您将在元素上实例化插件,然后插件在该元素上的后续鼠标hover时按预期工作。
使用docs中建议的配置(参见小提琴 ):
JavaScript的:
// tooltip demo $('div').tooltip({ selector: "a[data-toggle=tooltip]" })
HTML:
.tooltip()
函数启动链接上的工具提示效果,而不显示工具提示
说明:
当第一个hover触发$(this).tooltip()
,它首先实例化插件。 然后最后在第二次hover时你会得到工具提示。
解:
在你的代码上添加:
$(function() { $("a").tooltip(); });
解决方案(JSFiddle)
我认为如果让JQuery处理mouseover事件并将所有代码放在$(document).ready中会更清晰
类似的问题和解决方案可以在这里找到: Jquery onmouseover触发第二个事件