Jqueryのツールチップのプラグインで、divの追加を繰り返さないでください。

Question

ええ、私はこれを得るために見ることができません。

私は複数の項目に適用できるツールチッププラグインを作っています。

私はページ上に複数のアンカーを持っていますが、それらはマウスポインタでツールチップとして機能します。 IDを設定したくないので、変数c_ttipをdivの識別子として使用します。

ツールチップのマウスアウトがタイムアウトを有効にする前に、同じアンカーが修正された場合は、ツールチップを追加してクラスとCSSを繰り返し適用する必要があります。

スクリプトのdevのページ、http://kalluna.com/_dev-js.do

 
var c_ttip = $('<div>'); 

return 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(function() { 

     timer = setTimeout(function() { 
     c_ttip.fadeOut(200, function() { c_ttip.remove();}); 

    }, 2000); 

    }); 
}); 

Answer 1

divを追加する前に、ツールチップをトリガーしたオブジェクトを保存し、オブジェクトが異なることを確認することができます。何かが好きです：

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

Answer 2

あなたはタイムアウト/フェード状況にとmouseover()イベントが発動しないことを現在していることを示すために、ミューテックス/フラグ/セマフォのいくつかのフォームを必要とします。

タイムアウトID用に作成したタイマー変数をこの目的に使用できます。 c_ttipのように、変数（最初はfalse）として上に作成します。その後、​​コールバックでfalseに設定します。 mouseover()ルーチンは、開始時にtimer != falseかどうかを確認し、そうであれば直ちに終了する必要があります。

また、タイマーがアクティブなときにツールチップにクラスを追加し、フェードが完了したらクラスを削除することもできます。