Comment créer une boîte à outils semblable à une info-bulle SVG?

StackOverflow https://stackoverflow.com/questions/102457

  •  01-07-2019
  •  | 
  •  

Question

Etant donné un document SVG valide existant, quel est le meilleur moyen de créer des "popups informatifs", afin que, lorsque vous survolez ou cliquez avec le curseur sur certains éléments info-bulle en ligne) d’informations supplémentaires?

Cela devrait s'afficher correctement au moins dans Firefox et être invisible si l'image a été pixellisée au format bitmap.

Était-ce utile?

La solution 

<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>

Des explications complémentaires sont disponibles ici .

Autres conseils

Cette question a été posée en 2008. Le SVG s’est rapidement amélioré au cours des quatre années écoulées. Désormais, les info-bulles sont entièrement prises en charge sur toutes les plateformes dont je suis au courant Utilisez une balise < title > (et non un attribut) pour obtenir une info-bulle native.

Voici la documentation: https://developer.mozilla.org/en-US/docs/SVG / Element / title

L'élément < set > ne fonctionnant pas avec Firefox 3, je pense que vous devez utiliser ECMAScript.

Si vous ajoutez l'élément de script suivant à 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 ().

Ensuite, à la fin du SVG, ajoutez le texte de l'info-bulle: 

<text id="tooltip" x="0" y="0" visibility="hidden">Tooltip</text>

Enfin, à chacun des éléments pour lesquels vous souhaitez que la fonction survolée, ajoutez: 

onmousemove="ShowTooltip(evt)"
onmouseout="HideTooltip(evt)"
mouseovertext="Whatever text you want to show"

J'ai rédigé une explication plus détaillée avec des fonctionnalités améliorées à l'adresse http: //. www.petercollingridge.co.uk/interactive-svg-components/tooltip

Je n'ai pas encore inclus les info-bulles multilignes, qui nécessiteraient plusieurs éléments < tspan > et le retour à la ligne manuel.

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
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top