懸停沒有第二DOM對象消失馬上

Question

目標：對象用戶將鼠標懸停在以彈出次級DOM
工具提示：固定DOM對象定位在10-15px下面目標

我做了一個jquery 「tooltip」插件。該插件允許用戶通過DOM對象將懸停，並且將顯示「工具提示」。我希望用戶能夠將鼠標從目標移動到工具提示，而不會消失第二個鼠標離開目標。

我已經試過這樣：

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'); 
       }); 

然而，這似乎從隱藏停止工具提示。我想這樣做的原因是，在工具提示中可以使用表單，文本可以複製等。

我希望像setTimeout和clearTimeout的工作，因爲我不想使用hoverintent插件。

非常感謝你提前！

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); 
});