mouseout/mouseleave gets fired when mouse moves INSIDE the svg path element
d3.js, javascript, jquery, mouseevent, svg
Solution
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.
Problem
I am creating a timeline using d3 library. It have few path elements inside a parent SVG element like this: ``` <path d="M0,5.26429605180997L6.078685485212741,-5.26429605180997 -6.078685485212741,-5.26429605180997Z" transform="translate(585,61)scale(0.8)" style="fill: rgb(0, 0, 0);"></path> ``` Note that, I am using d3's symbol type (triangle-down) to generate the path element. Now, these elements are hooked with 2 event handlers: mouseover and mouseout to toggle the tooltip. mouseover even works fine. However, the mouseout event gets fired every time mouse moves within the path element; which makes the tooltip flicker rapidly as I move the mouse I tried:- mouseleave event as well, but it shows the same behaviour I also increased the size of path element to make sure that mouse was not actually moving out of the element Any ideas, how can I fix it? I created JSbin here - http://jsbin.com/mivihiyi/13/edit However, I myself am not able to reproduce it there. but, it the problem persists in my software .. aaaaaaaaaaaaaaa :( Here ismy code: ``` g.each(function(d, i) { d.forEach( function(datum, index){ var data = datum.times; g.selectAll("svg").data(data).enter() .append('path') .attr("class", "point") .attr("d", d3.svg.symbol().type("triangle-up")) .attr("transform", function(d) { return "translate(" + getXPos(d, i) + "," + getStackPosition(d, i) + ")scale(2)" }) .on({ mouseover: function(d) { tooltip.html('I am a tooltip'); tooltip.style("top", (d3.event.pageY - 40)+"px").style("left",(d3.event.pageX-15)+"px"); tooltip.style("visibility", "visible"); }, mouseleave: function(d) { tooltip.style("visibility", "hidden"); } }); ``` And i am initializing the tooltip at the top like this : ``` var tooltip = d3.select('#timeline1') .append("div") .attr("class", "timeline-tooltip") .style("visibility", "hidden") .text("Invalid Date"); ``` here is my css ``` .timeline-tooltip { color: black; font-size: x-small; border-top-width: 5px; border-top-color: rgb(149, 206, 254); border-top-style: solid; padding: 5px 10px 5px 10px; text-transform: uppercase; box-shadow: 2px 2px 2px rgba(105, 102, 102, 0.7); position: fixed; z-index: 10; } ```