How do I show a bootstrap tooltip with an SVG obje

Question

I'm going crazy trying to understand why I can show tooltips on regular HTML elements, but not on D3-generated SVGs: http://jsfiddle.net/nachocab/eQmYX/5/

What am I doing wrong?

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

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

Answer 1

Use d3-bootstrap library. This library will provide you alert, popovers, and tooltip functionalities compatible for D3.js You can add following code to your jsFiddle.

Add this in your head part.

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

Add this in your code part.

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

Answer 2

The problem was that the tooltip that Bootstrap v2.2.2 generates is a <div> that was getting inserted inside the <svg>, which made the browser not render it.

I ended up using the latest development version of Bootstrap Tooltip, which adds a new parameter to determine the container of the tooltip. Now I can do:

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

EDIT - One year later

For the record, I dropped the jQuery requirement and I'm now using the excellent d3-tip by Justin Palmer.