Question

当用户将鼠标悬停在我页面上的特定标记上时，我需要显示工具提示。但是，我想只在标签悬停至少一秒钟时才这样做。我尝试了下面的代码，但是 - 显然 - setTimeout()每次都会在一秒钟后触发，即使光标已经过了很长时间＆＃34;。

jQuery中有一种简单的方法可以实现这一目标吗？对任何插件解决方案都不感兴趣。

HTML

<div class="tag-tooltip" id="tooltip-1">Followers: 34</div>
<div class="tag js-tag" data-id="1">Star Wars (hover over me!)</div>

的jQuery

$(document).on('mouseenter', '.js-tag', function() {
    var $this = $(this);
    setTimeout(function() {
        $('#tooltip-' + $this.data('id')).show();
    }, 2000);
});

$(document).on('mouseleave', '.js-tag', function() {
    $('#tooltip-' + $this.data('id')).hide();
});

更新解决方案

下面有很多好的建议，很多方法可以达到同样的效果。但我发现clearTimeout()解决方案最干净。感谢所有贡献的人：）

Answer 1

你几乎就在那里，你走了：

http://jsfiddle.net/j21wjtwh/4/

var hoverTimer;

$(document).on('mouseenter', '.js-tag', function() {
    var $this = $(this);
    hoverTimer = setTimeout(function() {
        $('#tooltip-' + $this.data('id')).show();
    }, 1000);
});

$(document).on('mouseleave', '.js-tag', function() {
    clearTimeout(hoverTimer);
    $('#tooltip-' + $(this).data('id')).hide();
});

Answer 2

使用flag。在false上将其设置为mouseleave。在mouseenter中检查是否设置了变量。

var show = false; // Define var
// ^^^^^^^^^^^^^

$(document).on('mouseenter', '.js-tag', function () {
    show = true; // Set to `true`
    var $this = $(this);
    setTimeout(function () {
        if (show) { // Check if true
            $('#tooltip-' + $this.data('id')).show();
        }
    }, 1000);
});

$(document).on('mouseleave', '.js-tag', function () {
    $('#tooltip-' + $(this).data('id')).hide();
    show = false; // Unset 
});

演示：http://jsfiddle.net/tusharj/j21wjtwh/2/

Answer 3

试试这个：

$('.js-tag').on('mouseover', function() {
    var $this = $(this);

    if(!$this.data('timeout')) {
        $this.data('timeout', setTimeout(function() {
            $('#tooltip-' + $this.data('id')).show();
        }, 2000);
    }
});

$('.js-tag').on('mouseout', function() {
    var $this = $(this);
    if($this.data('timeout')) {
        clearTimeout($this.data('timeout'));
    }
    $('#tooltip-' + $this.data('id')).hide();
});

Answer 4

这是Fiddle

这是一个代码

$(document).on('mouseenter', '.js-tag', function() {
    var $this = $(this);
    setTimeout(function() {
        if($('.js-tag').is(":hover"))
        {
            $('#tooltip-' + $this.data('id')).show();
        }
    }, 1000);
});

$(document).on('mouseleave', '.js-tag', function() {
    $('#tooltip-' + $(this).data('id')).hide();
});

但是这里有一个小错误，尝试快速悬停/解锁，你会看到它

修改至于我THIS回答得更好。它不包含我的错误

Answer 5

只需跟踪您当前是否正在使用变量进行悬停。在鼠标输入时将悬停变量设置为true，在mouseleave上设置为false。然后在你的setTimeout事件中，检查你当前是否正在悬停。

Updated Fiddle

var hovering = false;
$('.js-tag').mouseenter(function () {
    var $this = $(this);
    hovering = true;
    setTimeout(function () {
        if (hovering) {
            $('#tooltip-' + $this.data('id')).show();
        }
    }, 1000);
});

$('.js-tag').mouseleave(function () {
    hovering = false;
    $('#tooltip-' + $(this).data('id')).hide();
});

Answer 6

您可以将计时器句柄存储在变量中，并使用clearTimeout上的mouseleave清除它。这是jsfiddle。

http://jsfiddle.net/Lz9snp9t/3/

仅当mouseenter事件持续1秒时才触发功能

6 个答案: