工具提示未在第一次鼠标hover时显示

我正在使用jquery-ui（1.10.2）工具提示小部件，我遇到了一个恼人的错误。 工具提示将不会在第一次鼠标hover时显示。 它在鼠标输出和重新鼠标hover时以及每次之后都会发生。 不是第一次。 这是我的代码：

HTML：

JavaScript的：

 $(document).ready( function() { $(document).on("mouseover", ".tooltip", function(e){ $(this).tooltip({ content: function() { return $(this).attr('title'); }, position: { my: "left+15 center", at: "right center" } }); }); }); 

我正在使用on（）因为其他进程可能会在初始加载后动态更改html。 我在这里不知所措，任何见解都会非常感激。 在此先感谢您的帮助。

Answer 1

这是因为tooltip是在鼠标hover时触发的，但是当第一次鼠标hover发生时，没有与该元素关联的工具提示窗口小部件。

您可以在此方案中使用的hack是检查是否为元素初始化窗口小部件，如果没有初始化窗口小部件，然后再次手动触发mouseover事件

 $(document).ready( function() { $(document).on("mouseover", ".tooltip", function(e){ if(!$(this).data('tooltip')){ $(this).tooltip({ content: function() { return $(this).attr('title'); }, position: { my: "left+15 center", at: "right center" } }).triggerHandler('mouseover'); } }); }); 

演示： 小提琴

正如@roasted建议您可以使用open方法而不是触发mouseover 。

而不是.triggerHandler('mouseover'); 使用tooltip('open');