Q:

D3.js tooltip reappearing after hovering over the hidden tooltip? 

How would one use D3.js to prevent this from happening?  
The issue is when a user hovers over the point they are shown the tooltip information.  But if they just happen to hover over the area where the tooltip used to be visible, it pops back up. 
Its not that big of a deal in this example.  But if I were to add more information or if the tooltip area were any larger this could get hairy.  
http://jsfiddle.net/hx8pjwdu/9/
 .on('mouseover', function(d) {     
   d3.select(".d3-tip").transition().style("opacity", "1");
   tip.show(d);
 })
 .on('mouseout', function(d) {
   d3.select(".d3-tip").transition().duration(1000).style("opacity", "0").each("end", tip.hide);
 });
 d3.select(".d3-tip").on('mouseover', function(d) {
   d3.select(".d3-tip").transition().style("opacity", "1");
 }).on('mouseout', function(d) {
   d3.select(".d3-tip").transition().duration(1000).style("opacity", "0").each("end", tip.hide);
 });

A:

You need to omit the final paragraph.  
  d3.select(".d3-tip").on('mouseover', function(d) {
       d3.select(".d3-tip").transition().style("opacity", "1");
     }).on('mouseout', function(d) {
       d3.select(".d3-tip").transition().duration(200).style("opacity", "0").each("end", tip.hide).disable();
     });

This is attaching a mouseover event to the tool tip area hence the reason it is showing.  Simple! 
http://jsfiddle.net/1ab435px/

