Как показать всплывающую подсказку с помощью SVG-объекта?

Я схожу с ума, пытаясь понять, почему я могу показывать подсказки на регулярных элементах HTML, но не на DG-генерируемых SVG: http://jsfiddle.net/nachocab/eQmYX/5/

Что я делаю неправильно?

$(document).ready(function () {
    $("a").tooltip({
      'placement': 'bottom'
    }); // this works

    $("my_circle").tooltip({
      'placement': 'bottom'
    }); // this does not work
});

Ответ 1

Проблема заключалась в том, что всплывающая подсказка, которую создает Bootstrap v2.2.2, представляет собой <div>, который вставлялся внутри <svg>, что заставило браузер не отображать его.

В итоге я использовал последнюю версию Bootstrap Tooltip, которая добавляет новый параметр для определения контейнера всплывающей подсказки. Теперь я могу сделать:

$(".my_circle").tooltip({
    'container': 'body',
    'placement': 'bottom'
}); // this works!

EDIT - через год

Для записи я отказался от требования jQuery, и теперь я использую превосходный d3-tip от Justin Palmer.

Ответ 2

Используйте библиотеку d3-bootstrap. Эта библиотека предоставит вам функции alert, popovers и tooltip, совместимые с D3.js Вы можете добавить следующий код в свой jsFiddle.

Добавьте это в свою часть головы.

<script src="https://github.com/shawnbot/d3-bootstrap/blob/master/d3-bootstrap.js"/>

Добавьте это в свою часть кода.

d3.selectAll(".my_circle")
    .call( d3.tooltip().placement("right") );