title: D3.js: Position tooltips using element position, not mouse position?
body: <p>I'm using D3 to draw a scatter graph. I would like to show tooltips when the user mouses over each circle. </p>
  
  <p>My problem is that I can append tooltips, but they're positioned using the mouse event <code>d3.event.pageX</code> and <code>d3.event.pageY</code>, so they are not positioned consistently over each circle. </p>
  
  <p>Instead, some are slightly to the left of the circle, some to the right - it depends on how the user's mouse enters the circle. </p>
  
  <p>This is my code: </p>
  
  <pre><code>circles
    .on("mouseover", function(d) {         
      tooltip.html(d)  
        .style("left", (d3.event.pageX) + "px")     
        .style("top", (d3.event.pageY - 28) + "px");    
    })                  
    .on("mouseout", function(d) {       
      tooltip.transition().duration(500).style("opacity", 0);   
    });
  </code></pre>
  
  <p>And is a JSFiddle showing the problem: <a href="http://jsfiddle.net/WLYUY/5/">http://jsfiddle.net/WLYUY/5/</a></p>
  
  <p>Is there some way I can use the centre of the circle itself as the position to orient the tooltip, not the mouse position?</p>