Why is my tooltip flashing on and off?

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;

Tags:

Tooltip

D3.Js