title: d3 tooltip hovering issue
body: <p>I show and hide a <code>tooltip</code> on hovering <code>circle</code>. I have a data in <code>tooltip</code> which can have a link which user probably want to click. The problem is I attached the <code>hover</code> function to the node when I try to click on <code>tooltip</code> link the <code>tooltip</code> get hide. I try to append <code>tooltip</code> inside <code>g</code> of hovering element but that did not work. Any suggestion <a href="http://jsfiddle.net/JnNwu/41/" rel="nofollow">fiddle</a></p>
  
  <pre><code> nodeEnter.append("circle")
          .attr("r", 10)
          .style("fill", function(d){ 
              return d._children ? "lightsteelblue" : "white"; 
          }).on('mouseover',function(){
              div.style('left',d3.event.pageX+20+'px').style('top',d3.event.pageY+'px').style('visibility','visible')          
          }).on('mouseout',function(){
          div.style('visibility','hidden')
          })
  </code></pre>