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

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

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

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

Ответ 1

Вы можете использовать элемент заголовка, как указано Phrogz. Есть также хорошие подсказки, такие как jQuery Tipsy http://onehackoranother.com/projects/jquery/tipsy/ (которые можно использовать для замены всех элементов заголовка), Bob Monteverde nvd3 или даже подсказку Twitter из их Bootstrap http://twitter.github.com/bootstrap/

Ответ 2

Можете ли вы просто использовать SVG <title> элемент и браузер браузера по умолчанию, который он передает? (Примечание: это не то же, что и атрибут title, который вы можете использовать в div/img/spans в html, он должен быть дочерним элементом с именем title)

rect {
  width: 100%;
  height: 100%;
  fill: #69c;
  stroke: #069;
  stroke-width: 5px;
  opacity: 0.5
}

<p>Mouseover the rect to see the tooltip on supporting browsers.</p>

<svg xmlns="http://www.w3.org/2000/svg">
  <rect>
    <title>Hello, World!</title>
  </rect>
</svg>