Étant donné un document SVG valide existant, quelle est la meilleure façon de créer des "popups informatifs", de sorte que lorsque vous placez ou cliquez sur certains éléments, vous faites une fenêtre arbitraire (pas seulement une info-bulle)) d'informations supplémentaires?Comment créer une boîte de type "tooltip" SVG?
Cela devrait s'afficher correctement au moins dans Firefox et être invisible si l'image était pixellisée au format bitmap.
<svg>
<text id="thingyouhoverover" x="50" y="35" font-size="14">Mouse over me!</text>
<text id="thepopup" x="250" y="100" font-size="30" fill="black" visibility="hidden">Change me
<set attributeName="visibility" from="hidden" to="visible" begin="thingyouhoverover.mouseover" end="thingyouhoverover.mouseout"/>
</text>
</svg>
D'autres explications peuvent être trouvées here.
Puisque l'élément <set> ne fonctionne pas avec Firefox 3, je pense que vous devez utiliser ECMAScript.
Si vous ajoutez l'élément de script suivant dans votre SVG:
<script type="text/ecmascript"> <![CDATA[
function init(evt) {
if (window.svgDocument == null) {
// Define SGV
svgDocument = evt.target.ownerDocument;
}
tooltip = svgDocument.getElementById('tooltip');
}
function ShowTooltip(evt) {
// Put tooltip in the right position, change the text and make it visible
tooltip.setAttributeNS(null,"x",evt.clientX+10);
tooltip.setAttributeNS(null,"y",evt.clientY+30);
tooltip.firstChild.data = evt.target.getAttributeNS(null,"mouseovertext");
tooltip.setAttributeNS(null,"visibility","visible");
}
function HideTooltip(evt) {
tooltip.setAttributeNS(null,"visibility","hidden");
}
]]></script>
Vous devez ajouter onload="init(evt)" dans l'élément SVG pour appeler la fonction init().
Puis, à la fin du SVG, ajouter le texte info-bulle:
<text id="tooltip" x="0" y="0" visibility="hidden">Tooltip</text>
Enfin, pour chacun des éléments que vous voulez avoir la fonction mouseover ajouter:
onmousemove="ShowTooltip(evt)"
onmouseout="HideTooltip(evt)"
mouseovertext="Whatever text you want to show"
I 'ai écrit une explication plus détaillée avec une fonctionnalité améliorée à http://www.petercollingridge.co.uk/interactive-svg-components/tooltip
Je n'ai pas encore inclus les info-bulles multilignes, ce qui nécessiterait plusieurs <tspan> éléments et emballage manuel des mots.
Cette question a été posée en 2008. Le SVG s'est amélioré rapidement au cours des quatre dernières années. Les infobulles sont maintenant entièrement supportées sur toutes les plates-formes que je connais. Utilisez une balise <title> (pas un attribut) et vous obtiendrez une info-bulle native.
Voici les docs: https://developer.mozilla.org/en-US/docs/SVG/Element/title
Note: Cela ne semble pas fonctionner lorsque vous l'ajoutez dynamiquement en utilisant javascript. – bzuillsmith
En outre, vous ne pouvez pas styler les astuces natives :( – CpILL
J'ai utilisé ceci avec le framework de visualisation d3 pour ajouter une info-bulle en utilisant javascript et cela a fonctionné pour moi dans les versions récentes de chrome et firefox. "g.cell.child"). append ("title"). text (fonction (d) {return d.size;}); ' – Pat
Cela devrait fonctionner:
nodeEnter.append("svg:element")
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; })
.append("svg:title")
.text(function(d) {return d.Name+"\n"+d.Age+"\n"+d.Dept;}); // It shows the tool tip box with item [Name,Age,Dept] and upend to the svg dynamicaly
Morais, il pourrait être utile si la question vous rétréci un peu. Peut-être un peu plus précis sur les technologies qui sont à votre disposition et sur les navigateurs que vous devez prendre en charge (Firefox et quoi d'autre?) Juste une suggestion. –
La réponse acceptée est maintenant périmée et celle de Neil Fraser est toujours correcte. – Craig