Tengo una serie de rectángulos svg (con D3.js) y quiero mostrar un mensaje con el mouseover, el mensaje debe estar rodeado por un cuadro que actúe como fondo. Ambos deben estar perfectamente alineados entre sí y con el rectángulo (arriba y centrado). ¿Cuál es la mejor manera de hacer esto?

Intenté agregar un texto svg usando los atributos "x", "y", "width" y "height", y luego preparé un svg rect. El problema es que el punto de referencia para el texto está en el medio (ya que lo quiero centrado alineado, lo utilicétext-anchor: middle), pero para el rectángulo es la coordenada superior izquierda, además quería un poco de margen alrededor del texto, lo que lo hace un poco molesto.

La otra opción era usar un div html, lo que estaría bien, porque puedo agregar el texto y el relleno directamente pero no sé cómo obtener las coordenadas absolutas para cada rectángulo. ¿Hay alguna forma de hacer esto?