title: mouseout/mouseleave gets fired when mouse moves INSIDE the svg path element
body: <p>I am creating a timeline using d3 library.
  It have few path elements inside a parent SVG element like this:</p>
  
  <pre><code> &lt;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);"&gt;&lt;/path&gt;
  </code></pre>
  
  <p>Note that, I am using d3's symbol type (triangle-down) to generate the path element.</p>
  
  <p>Now, these elements are hooked with 2 event handlers: mouseover and mouseout to toggle the tooltip.</p>
  
  <p>mouseover even works fine.</p>
  
  <p>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 </p>
  
  <p>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</p>
  
  <p>Any ideas, how can I fix it?</p>
  
  <p>I created JSbin here - <a href="http://jsbin.com/mivihiyi/13/edit" rel="noreferrer">http://jsbin.com/mivihiyi/13/edit</a>
  However, I myself am not able to reproduce it there. but, it the problem persists in my software .. aaaaaaaaaaaaaaa :(</p>
  
  <p>Here ismy code:</p>
  
  <pre><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");
          }
        });
  </code></pre>
  
  <p>And i am initializing the tooltip at the top like this :</p>
  
  <pre><code> var tooltip = d3.select('#timeline1')
          .append("div")
          .attr("class", "timeline-tooltip")
          .style("visibility", "hidden")
          .text("Invalid Date"); 
  </code></pre>
  
  <p>here is my css</p>
  
  <pre><code>.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;
  }
  </code></pre>