Comment créer une boîte SVG"tooltip"?
compte tenu d'un document SVG valide existant, Quelle est la meilleure façon de créer des "popups informationnels", de sorte que lorsque vous survolez ou cliquez sur certains éléments (disons ) vous popup Une boîte avec un montant arbitraire (c.-à-d. pas seulement une ligne tooltip) d'informations supplémentaires?
cela devrait s'afficher correctement au moins dans Firefox et être invisible si l'image a été rasterized à un format bitmap.
4 réponses
<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 ici.
Cette question a été posée en 2008. La SVG s'est rapidement améliorée au cours des quatre années écoulées. Maintenant, les infobulles sont entièrement pris en charge dans toutes les plateformes que je connais. Utiliser un <title> balise (pas un attribut) et vous obtiendrez un natif d'info-bulle.
Voici les documents: https://developer.mozilla.org/en-US/docs/SVG/Element/title
Depuis le <set> element 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 de la SVG, ajouter le texte tooltip:
<text id="tooltip" x="0" y="0" visibility="hidden">Tooltip</text>
enfin, à chacun des éléments que vous voulez ajouter la fonction mouseover:
onmousemove="ShowTooltip(evt)"
onmouseout="HideTooltip(evt)"
mouseovertext="Whatever text you want to show"
j'en ai écrit plus explication 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 infobulles multilignes, qui nécessiteraient plusieurs <tspan> éléments et manuel à retour automatique à la ligne.
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