web-dev-qa-db-fra.com

Comment afficher une info-bulle bootstrap avec un objet SVG?

Je deviens fou en essayant de comprendre pourquoi je peux afficher des info-bulles sur des éléments HTML normaux, mais pas sur des SVG générés par D3: http://jsfiddle.net/nachocab/eQmYX/5/

Qu'est-ce que je fais mal?

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

    $("my_circle").tooltip({
      'placement': 'bottom'
    }); // this does not work
});
twitter-bootstrapsvgtooltipd3.js
27
nachocab

Le problème était que l'info-bulle générée par Bootstrap v2.2.2 est un <div> qui était inséré à l'intérieur du <svg>, ce qui a empêché le navigateur de le rendre.

J'ai fini par utiliser la dernière version de développement de Bootstrap Tooltip , qui ajoute un nouveau paramètre pour déterminer le conteneur de l'info-bulle. Maintenant je peux faire:

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

EDIT - Un an plus tard

Pour mémoire, j'ai abandonné l'exigence jQuery et j'utilise maintenant l'excellent d3-tip de Justin Palmer.

55
nachocab

Utilisez la bibliothèque d3-bootstrap. Cette bibliothèque vous fournira des fonctionnalités d'alerte, de popovers et d'infobulles compatibles pour D3.js. Vous pouvez ajouter le code suivant à votre jsFiddle.

Ajoutez ceci dans votre tête.

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

Ajoutez ceci dans votre partie de code.

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