Как добавить всплывающую подсказку к графике svg?

У меня есть ряд прямоугольников svg (с использованием D3.js), и я хочу отображать сообщение при наведении курсора, сообщение должно быть окружено рамкой, которая действует как фон. Они оба должны быть идеально выровнены друг с другом и с прямоугольником (сверху и по центру). Как лучше всего это сделать?

Я попытался добавить текст svg, используя атрибуты «x», «y», «width» и «height», а затем добавить прямоугольник svg. Проблема в том, что контрольная точка для текста находится посередине (поскольку я хочу, чтобы он был выровнен по центру, я использовал text-anchor: middle), но для прямоугольника это верхняя левая координата, плюс я хотел немного поля вокруг текста, что делает его своего рода болью.

Другим вариантом было использование html div, что было бы неплохо, потому что я могу добавить текст и отступы напрямую, но я не знаю, как получить абсолютные координаты для каждого прямоугольника. Есть ли способ сделать это?