Jquery Tooltip 插件，不要重复 div 追加？答案

【问题标题】：Jquery Tooltip plugin, don't repeat div append?Jquery Tooltip 插件，不要重复 div 追加？
【发布时间】：2011-01-26 00:47:43
【问题描述】：

好的，我看不到这个。

我正在制作一个可以应用于多个项目的工具提示插件。

当鼠标悬停时，我在页面上有多个锚点，它们充当工具提示。我使用变量 c_ttip 作为 div 的标识符，因为我不想在其上设置 ID。

如果在工具提示 mouseout 激活将其删除的超时之前，相同的锚被移出，我想避免附加工具提示并一遍又一遍地应用类和 css。

脚本开发页面，http://kalluna.com/_dev-js.do

var c_ttip = $('

'); 返回 this.each(function() { $(this).mouseover(function() { c_ttip.appendTo(document.body).hide(); c_ttip.html('inside my tooltip').addClass('c_ttip_box').css({'top' : obj.position().top + 20, 'left' : obj.position().left}).show (); }).mouseout(函数() { 计时器 = setTimeout(function() { c_ttip.fadeOut(200, function() { c_ttip.remove();}); }, 2000); }); });

【问题讨论】：

标签： javascript jquery xhtml

【解决方案1】：

您可以存储触发工具提示的对象，并在添加 div 之前验证该对象是否不同。比如：

var c_ttip = $('<div>');
var currobject;
...
$(this).mouseover(function() {
if(this == currobject) return;
currobject = this;
...

【讨论】：

【解决方案2】：

您需要某种形式的互斥体/标志/信号量来表明您当前处于超时/淡出状态并且不应触发 mouseover() 事件。

您为超时 ID 创建的计时器变量可用于此目的。在上面创建它作为一个变量（最初是false），就像你对c_ttip 一样。然后在fadeOut() 回调中将其设置为false。 mouseover() 例程应在启动时检查是否为timer != false，如果是则立即退出。

或者，您可以在计时器处于活动状态时向工具提示添加一个类，并在淡入淡出完成时将其删除。

【讨论】：