score:-1

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: http://jsfiddle.net/xkya4cfp/1/

score:15

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

pointer-events="all"

This will make mouseover work regardless of the fill.

score:35

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