title: How to add a tooltip to an svg graphic?
body: <p>I have a series of svg rectangles (using D3.js) and I want to display a message on mouseover, the message should be surrounded by a box that acts as background. They should both be perfectly aligned to each other and to the rectangle (on top and centered). What is the best way to do this?</p>
  
  <p>I tried adding an svg text using the "x", "y", "width" and "height" attributes, and then prepending an svg rect. The problem is that the reference point for the text is in the middle (since I want it centered aligned I used <code>text-anchor: middle</code>), but for the rectangle it's the top left coordinate, plus I wanted a bit of margin around the text which makes it kind of a pain.</p>
  
  <p>The other option was using an html div, which would be nice, because I can add the text and padding directly but I don't know how to get the absolute coordinates for each rectangle. Is there a way to do this?</p>