Comment puis-je afficher un bootstrap info-bulle avec un tel objet?
Je suis allez fou en essayant de comprendre pourquoi je ne peux afficher les info-bulles régulier sur les éléments HTML, mais pas sur D3 généré SVGs: http://jsfiddle.net/nachocab/eQmYX/5/
Ce que je fais mal?
$(document).ready(function () {
$("a").tooltip({
'placement': 'bottom'
}); //this works
$("my_circle").tooltip({
'placement': 'bottom'
}); //this does not work
});
- jQuery n'est pas jouer gentil avec SVG. Essayez de github.com/shawnbot/d3-bootstrap
- N'ont pas regardé le d3-bootstrap projet encore... Si c'est possible, vous pourriez avoir à utiliser svg est <foreignObject>. jsfiddle.net/BCsGc/1
- Peut-être que je suis totalement en manque de quelque chose, mais... Vous avez accepté la réponse de lephix. Avez-vous un exemple de travail de ce, de "bootstrap" info-bulles générées ET être visible? Tout d'abord, lephix a "d3.tooltip()", mais je crois que c'est faux: il doit être "bootstrap.tooltip()". Voici une fourchette de votre violon: jsfiddle.net/7bNgC/11 bien Sûr, l'info-bulle est arriver, mais il n'est pas encore visible.
Vous devez vous connecter pour publier un commentaire.
Le problème est que l'info-bulle qui Bootstrap v2.2.2 génère est un
<div>
qui étaient insérés à l'intérieur de la<svg>
, qui a fait au navigateur de ne pas le rendre.J'ai fini par utiliser la dernière version de développement de Bootstrap Info-Bulle, qui ajoute un nouveau paramètre pour déterminer le conteneur de l'info-bulle. Maintenant je peux le faire:
MODIFIER - Un an plus tard
Pour l'enregistrement, j'ai laissé tomber le jQuery exigence et je suis maintenant à l'aide de l'excellent d3-conseil par Justin Palmer.
$(".my_circle")
, avec la dot.Utilisation d3-bootstrap de la bibliothèque.
Cette bibliothèque va vous donner l'alerte, popovers, et l'info-bulle fonctionnalités compatible pour D3.js
Vous pouvez ajouter le code suivant à votre jsFiddle.
Ajouter ceci dans votre partie de la tête.
Ajouter dans votre code.