Why is my tooltip flashing on and off?

Question

I am creating a tooltip after this example.

For some reason, my tooltip flashes on and off as I move the mouse. As I understand it, the mousemove() function finds the closest datapoint; so as long as the mouse is over the .overlay rectangle, the tooltip should always be showing.

Any ideas? Here's my fiddle:

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

Answer 1

The flickering happens because the tooltip sometimes appears below the mouse and causes mouseout be called and that again removes the tooltip and again the mouse is over the element so mouseover is called and the cycle continues...

Make a little gap (where I added 5), so the tooltip won't come under the mouse:

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

EDIT Another, maybe a better, way to avoid the tooltip affecting the mouse is to give it styling:

pointer-events: none;

Answer 2

I think it's to do the the mouseover/mouseout continuosly firing when they needn't:

updated fiddle (again): 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);