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

Question

请查看带有工具提示的 jQuery flot 示例，位于http://www.flotcharts.org/flot/examples/interacting/

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

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

请看下面的动画 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();
            }
    });

我认为这是因为当我快速移动鼠标时，$("#tooltip").hide(); 会在 $("#tooltip").html 未呈现时执行。

Answer 1

#placeholder，即图形容器，绑定到plotover 事件。
因此，当此容器元素上发生此类事件时，脚本会检查是否返回了 item 以决定显示或隐藏工具提示。

现在，当您的鼠标在此容器外时，不会再触发 plothover 事件。所以不会执行脚本来隐藏工具提示。

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

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

另外，请注意.bind() is deprecated。最好使用.on()。

---

编辑

我没有考虑到我的第一个答案会延迟。
在图表项上快速移动鼠标时...工具提示显示动画会有 600 毫秒的延迟。

所以 mouseleve 事件触发得太早而无法关闭它。

现在试试这个：

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

所以现在，在 mousemove 上，这个脚本将检查鼠标是否在他的任何孩子的图表容器上。如果没有，它将隐藏工具提示。

Answer 2

我认为另一个答案中的解释不完整：

出现问题是因为hide() 在fadeIn() 完成之前执行。在fadeIn() 的末尾，show() 被隐式执行。

使用fadeOut(1) 而不是hide() 可以解决此问题，因为fadeOut() 在fadeIn() 之后是queued，而不是像hide() 那样直接执行。