I just encountered the same problem today, and after googling around I found this question. In my case, the issue was I set the following CSS property on my :

path { fill: none; }

This will cause mouse over/out events to trigger only on the path stroke, NOT inside/outside path area. To fix it, change css to:

path { fill: transparent; }

This will set the mouse events to behave as expected: trigger mouseover when enters area and mouseout when leaves area.

See this fiddle:


set the pointer-events attribute on the element to all (or some other suitable value for you)


This will make mouseover work regardless of the fill.


Just in case anyone else has this problem, finds this page and is as stupid as I am: I had the same symptoms, but then suddenly realised that I was drawing the tooltip on top of the svg element that I was trying to add the tooltip to. Net result: as soon as the tooltip was made visible, the mouseleave event fired; which is of course entirely reasonable since the mouse had just left the underlying svg element, because it was now on top of the tooltip.

Solution: make sure that the tooltip is positioned so that it cannot possibly overlap where the mouse is.

Related Query