暂停悬停脚本，当悬停在重叠，绝对定位元素

Question

我有一堆元素，触发悬停工具提示。问题在于工具提示与元素重叠，所以如果我将鼠标悬停在工具提示上，它将有效地将鼠标移出元素。然后，当鼠标点击和关闭触发器时，最终出现工具提示渐入渐出的情况。我需要以某种方式暂停脚本，以便它不会触发第二部分（mouseleave），只要我将鼠标悬停在工具提示上即可。

踢球者是这样的：工具提示不是也不能是子元素，因为触发元素是一个imagemap中的区域，所以我不能简单地使用mousenter（）并将其称为包装。整个图像被热点覆盖，因此鼠标也可以从该区域移动到工具提示区域，然后淡出第一个工具提示，并淡入新的工具提示。

我知道这与事件冒泡有关，但整个话题对我来说都是一片谜底，我希望有一个简单的解决方案。

下面是一些随机码面食：

HTML：

<img src="image.png" usemap="#Map" /> 
<map name="Map" id="Map"> 
    <area shape="poly" coords="x,y,z,w" href="#tt01" /> 
    <area shape="poly" coords="a,b,c,d" href="#tt02" /> 
</map> 

<div class="tooltip tt01"></div> 
<div class="tooltip tt02"></div> 

JS：

$("area").hover(function() { 
     var i = $(this).attr("href").split("#"); 
     var i = "." + i[1]; 

     $(".tooltip").removeClass("glue"); 
     $(i).fadeIn(); 
    }, function() { 
     var i = $(this).attr("href").split("#"); 
     var i = "." + i[1]; 

     $(i).hover(function() { 
     $(this).addClass("glue"); 
     }, function() { 
     $(this).removeClass("glue"); 
     }); 

     setTimeout(function() { $(".tooltip:not(.glue)").fadeOut(); }, 200); 
    }); 

正如你所看到的，我已经尝试切换一些类（后切换自定义属性不起作用）。这是有效的，但只要我从一个区域移动到工具提示区到另一个区域，或者如果我从工具提示移回该区域，并进入新的区域，就会发生有趣的事情。

Answer 1

我与辐条客户也想在移动设备上工作，所以我所做的就是t o改为点击触发。更简单，因为我不必担心鼠标移动的位置。

Answer 2

编辑：使提示跟随光标，它绝对定位：

HTML：

<img src="image.png" usemap="#Map" /> 
    <map name="Map" id="Map"> 
     <area shape="poly" coords="x,y,z,w" alt="text for this area" /> 
    </map> 

    <div class="tooltip"></div> 

JS：

$('area').hover(function(){ 
    $('.tooltip').fadeIn('fast').html('Hovering over : ' + $(this).attr('alt')); 
},function(){ 
    $('.tooltip').hide().html(''); 
}); 

$(document).bind('mousemove', function(e){ 
    $('.tooltip').css({ 
     left: e.pageX + 20, 
     top: e.pageY 
    }); 
}); 

演示：http://jsfiddle.net/AlienWebguy/h8AYF/