重複しているホバースクリプトを一時停止すると、絶対配置された要素

Question

ホバー上にツールチップをトリガーする要素がたくさんあります。問題は、ツールヒントが要素と重なっているため、ツールチップ上にマウスを置くと、効果的に要素から外れます。私はその後、トリガーのオン/オフに応じてツールチップが連続的にフェードイン/フェードアウトする状況に陥ります。私は何とかスクリプトを一時停止する必要があるので、2番目の部分（mouseleave）を起動しないように、ツールチップにカーソルを置いている限り。

キッカーはこれです：トリガ要素はイメージマップ内の領域であるため、ツールチップは子要素ではありません。したがって、私は単純に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); 
    }); 

あなたが見ることができるように、私は後に（いくつかのクラスをトグルしようとしましたが、カスタム属性を切り替えると機能しませんでした）。これはうまくいきますが、1つのエリアから、別のエリアにツールチップを移動したり、ツールチップからそのエリアに移動したり、新しいエリアに移動したりするとすぐに楽しいことが起こります。

Answer 1

私が話を聞きましたクライアント、モバイルデバイスでも作業したいと思っていたので、私がしたのはt o代わりにクリックをトリガーにする。はるかに簡単ですが、私はマウスがどこを旅行するか心配する必要はありません。

Answer 2

EDIT：ツールチップは絶対にカーソル位置、それに従ってください：

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/