Bootstrap 工具提示的定时隐藏不适用于快速光标移动

Question

在这个 fiddle 中，我有代码可以隐藏 manual Bootstrap 上 <img> 的工具提示，位于 之后的 <button> 内2 秒。此外，我也一直手动将其隐藏在mouseleave上。

大部分时间都有效，但如果您快速移动鼠标光标 in/out，有时您会看到进入该区域最初不显示工具提示的情况。该问题的一个症状是某些东西会闪烁并立即消失。

$("[rel=tooltip]").tooltip({
    trigger: 'manual',
    placement: 'bottom'
});
$("[rel=tooltip]").on("mouseenter", function () {
    console.log('TOOLTIP: Entered mouseeneter');
    var that = $(this)
    that.tooltip('show');
    setTimeout(function () {
        that.tooltip('hide');
        console.log('TOOLTIP: Completed Hide after 2000');
    }, 2000);
});
$("[rel=tooltip]").on("mouseleave click", function () {
    $(this).tooltip('hide');
});

Answer 1

可能是 the timeout 开始了。您可以在离开工具提示时禁用超时。我用全局 timeoutTooltip 变量做了一个快速而肮脏的解决方案：

var timeoutTooltip;

$("[rel=tooltip]").tooltip({
    trigger: 'manual',
    placement: 'bottom'
});

$("[rel=tooltip]").on("mouseenter", function () {
    console.log('TOOLTIP: Entered mouseeneter');
    var that = $(this)
    that.tooltip('show');
    timeoutTooltip = window.setTimeout(function () {
        that.tooltip('hide');
        console.log('TOOLTIP: Completed Hide after 2000');
    }, 2000);
});

$("[rel=tooltip]").on("mouseleave click", function () {
    $(this).tooltip('hide');
    window.clearTimeout(timeoutTooltip);
});

timeoutTooltip用于在离开工具提示时清除超时。我确信这可以编码得更好，但它似乎有效。

Bootstrap 工具提示的定时隐藏不适用于快速光标移动

Timed hiding of Bootstrap Tooltip does not work on rapid cursor motion

javascript

twitter-bootstrap

twitter-bootstrap-tooltip