Javascript 当我将鼠标快速移出绘图时，工具提示不会隐藏

请看一看带有工具提示的jQuery flot示例，它位于

当我放置鼠标并正常移动鼠标时，工具提示会正常出现和消失

但是，当我将鼠标快速移出绘图时，工具提示将保留

请看下面的动画gif，它显示了缓慢和快速的鼠标移动

处理悬停的主要部件代码如下：

$("#placeholder").bind("plothover", function (event, pos, item) {

            if (item) {
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);

                $("#tooltip").html(item.series.label + " of " + x + " = " + y)
                    .css({top: item.pageY+5, left: item.pageX+5})
                    .fadeIn(200);
            } else {
                $("#tooltip").hide();
            }
    });

我想这是因为当我快速移动鼠标时，

$（“#工具提示”）.hide（）在未呈现
$（“#工具提示”）.html
时执行。
#占位符
，即图形容器，绑定到
plotover
事件。

因此，当此容器元素上发生此类事件时，脚本将检查是否返回了
项
，以决定显示或隐藏工具提示

现在，当鼠标位于该容器外部时，不再触发
plothover
事件。因此，不会执行脚本来隐藏工具提示

为了解决这个问题，我将添加一个脚本，当鼠标离开容器时，该脚本将隐藏工具提示，如下所示：

$("#placeholder").on("mouseleave", function(){
  $("#tooltip").hide();
});

另外，请注意。最好使用。




编辑

我在第一次回答时没有考虑延迟问题。

在图表项上快速移动鼠标时。。。工具提示显示动画有600毫秒的延迟

因此，触发mouseleve事件太早，无法关闭它

现在试试这个：

$(document).on("mousemove",function(e){
  if ( $(e.target).closest("#placeholder").length == 0 ){
    $("#tooltip").hide();
  }
});

现在，在mousemove上，这个脚本将检查鼠标是否在他的任何孩子的图表容器上。如果没有，它将隐藏工具提示。
我认为另一个答案中的解释不完整：

出现此问题的原因是
hide（）
在
fadeIn（）
完成之前执行。在
fadeIn（）
的末尾，隐式执行
show（）

使用
fadeOut（1）
而不是
hide（）
解决了这一问题，因为
fadeOut（）
是在
fadeIn（）之后执行的，而不是像
hide（）
那样直接执行。我找不到原因，但是
$（“#工具提示”）.hide（）不起作用。以下是我的测试：
$（“#tooltip”）.htm（“测试”）
；更改了工具提示文本。
$（“#图表工具提示”）.css（{display:none}）没有隐藏。css（{“背景色”：#bee}）未更改颜色。最后是
$（“#图表工具提示”）.removeAttr（'style'）工作。任何方式，谢谢，请编辑，这样我就可以标记为正确的答案！嗯。。。我在页面中没有看到任何
$（“#图表工具提示”）
元素。。。所以我不明白，行动！是的，我的意思是
$（“#工具提示”）
。。。这是一个刻不容缓的错误。所以只有
$（“#工具提示”）.removeAttr（'style'）工作我刚试过。。。这是不好的。它会移动页脚中的工具提示X=0和Y=0位置=相对。。。。仍然可见
.hide（）
在我这边起作用。嗯，但没问题。。。有一个延迟问题。。。等一下。
fadeOut（1）
有一些工作原理，但移动鼠标时会看到闪烁。