twitter-bootstrap - tag - icons bootstrap 4

¿Cómo se muestra una información sobre herramientas de arranque con un objeto SVG?

Question

Me estoy volviendo loco tratando de entender por qué puedo mostrar información sobre herramientas en elementos HTML comunes, pero no en SVG generados por D3: http://jsfiddle.net/nachocab/eQmYX/5/

¿Qué estoy haciendo mal?

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

Answer 1

El problema era que la información sobre herramientas generada por Bootstrap v2.2.2 es una <div> que se estaba insertando dentro de <svg> , lo que hacía que el navegador no la procesara.

Terminé usando la última versión de desarrollo de Bootstrap Tooltip , que agrega un nuevo parámetro para determinar el contenedor de la información sobre herramientas. Ahora puedo hacer:

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

EDITAR - Un año después

Para el registro, dejé el requisito de jQuery y ahora estoy usando el excelente d3-tip de Justin Palmer.

Answer 2

Use la biblioteca d3-bootstrap. Esta biblioteca le proporcionará funcionalidades de alertas, ventanas emergentes y herramientas emergentes compatibles con D3.js. Puede agregar el siguiente código a su jsFiddle.

Agrega esto en tu parte de la cabeza.

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

Agregue esto en su parte de código.

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