javascript - 从一个对象悬停到另一个对象，第二个 DOM 对象不会立即消失

Question

目标:对象用户将鼠标悬停在上面以调出辅助 DOM
工具提示:修复了 DOM 对象位于目标下方约 10-15 像素的位置

我制作了一个 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);

});