Question

目标：对象用户将鼠标悬停以显示辅助DOM 工具提示：固定DOM对象位于目标以下10-15px左右

我制作了一个jquery “工具提示”插件。此插件允许用户悬停覆盖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);
});

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

2 个答案: