ホバー

Question

対象：オブジェクトのユーザーは、二次DOMに
ツールチップ育てる上にマウスを移動します：およそ10-15px 目標の下に位置固定DOMオブジェクトを

jquery 「ツールチップ」プラグインを作成しました。このプラグインを使用すると、ユーザーはのDOMオブジェクト上でに移動し、は「ツールチップ」と表示されます。ユーザーがに移動すると、マウスがターゲットからツールチップに移動して消えなくなります。 2番目のマウスがターゲットから離れます。

私はこれを試してみました：

var hoverTimeout; 

       data.target.hover(function(){ 
        $this.tooltip('show'); 
       }, function(){ 

        hoverTimeout = setTimeout(function(){ 
         $this.tooltip('hide'); 
         console.log('hey'); 
        }, 1000); 

       }); 

       data.tooltip.hover(function(){ 
        data.tooltip('show'); 
        clearTimeout(hoverTimeout); 
       }, function(){ 
        data.tooltip('hide'); 
       }); 

しかし、これは隠れてからツールチップを停止するようです。私がこれをやりたいのは、フォームを使うことができる、テキストをツールチップにコピーすることなどです。

私はhoverintentプラグインを使いたくないので、setTimeoutとclearTimeoutのようなものがうまくいくと思っています。

ありがとうございました！

Answer 1

あなたはタイマー両方の方法を使用する必要があります

var hoverTimeout; 

data.target.hover(function() 
{ 
    hoverTimeout && clearTimeout(hoverTimeout); 
    $(this).tooltip('show'); 
}, 
function() 
{ 
    var $this = $(this); 
    hoverTimeout = setTimeout(function(){ 
     $this.tooltip('hide'); 
    }, 1000); 

}); 

data.tooltip.hover(function() 
{ 
    hoverTimeout && clearTimeout(hoverTimeout); 
}, 
function() 
{ 
    var $this = $(this); 
    hoverTimeout = setTimeout(function(){ 
     $this.tooltip('hide'); 
    }, 1000); 
}); 

---

をあなた、combine the twoおそらくべきあなたはとにかくそれらの両方にまったく同じことをやっているのは：

var hoverTimeout; 

data.target.add(data.tooltip).hover(function() 
{ 
    hoverTimeout && clearTimeout(hoverTimeout); 
    $(this).tooltip('show'); 
}, 
function() 
{ 
    var $this = $(this); 
    hoverTimeout = setTimeout(function(){ 
     $this.tooltip('hide'); 
    }, 1000); 

}); 

Answer 2

var hoverTimeout; 

data.target.hover(function() 
{ 
    $this.tooltip('show'); 
    clearTimeout(hoverTimeout); 
}, function() 
{ 
    hoverTimeout = setTimeout(function(){ 
     $this.tooltip('hide'); 
    }, settings.delay); 
}); 

data.tooltip.hover(function() 
{ 

    clearTimeout(hoverTimeout); 
}, function() 
{ 
    hoverTimeout = setTimeout(function(){ 
     $this.tooltip('hide'); 
    }, settings.delay); 
});