为什么我的工具提示会闪烁？

Question

我在这个例子之后创建了一个工具提示.

出于某种原因,当我移动鼠标时,我的工具提示会闪烁.据我了解,该mousemove()函数找到最接近的数据点; 因此,只要鼠标位于.overlay矩形上方,就应始终显示工具提示.

有任何想法吗？这是我的小提琴:

http://jsfiddle.net/samselikoff/zhMQ8/1/

Answer 1

闪烁的发生是因为工具提示有时会出现在鼠标下方并导致鼠标输出被调用并再次移除工具提示并再次将鼠标移到元素上,因此鼠标悬停被调用并且循环继续...

缩小一点(我添加了5个),因此工具提示不会出现在鼠标下面:

tooltip.attr("transform", "translate(" + (xScale(d.date)   + 5  ) + ",0)");

编辑 另一种,也许更好的方法来避免影响鼠标的工具提示是给它造型:

pointer-events: none;

Answer 2

我认为这是在不需要时持续触发mouseover：mouseout

更新的小提琴（再次）：http://jsfiddle.net/zhMQ8/3/

g.on("mouseover", function() { tooltip.style("display", null); });

g.on("mouseout", function() { tooltip.style("display", "none"); });

g.select(".overlay").on("mousemove", mousemove);