web-dev-qa-db-fra.com

Comment créer une boîte de type "info-bulle" SVG?

Étant donné un document SVG valide existant, quelle est la meilleure façon de créer des "popups d'information", de sorte que lorsque vous survolez ou cliquez sur certains éléments (disons), vous affichez une boîte avec un montant arbitraire (c'est-à-dire pas seulement une info-bulle sur une seule ligne) de 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.

popupsvgtooltip
39
morais
<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>

De plus amples explications peuvent être trouvées ici .

24
Sparr

Cette question a été posée en 2008. SVG s'est rapidement améliorée au cours des quatre années écoulées. Les info-bulles sont désormais entièrement prises en charge sur toutes les plateformes que je connais. Utiliser un <title> tag (pas un attribut) et vous obtiendrez une info-bulle native.

Voici les documents: https://developer.mozilla.org/en-US/docs/SVG/Element/title

48
Neil Fraser

Étant donné que 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 ().

Ensuite, à la fin du SVG, ajoutez le texte de l'infobulle:

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

Enfin, à chacun des éléments pour lesquels vous souhaitez que la fonction de survol de la souris soit ajoutée:

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

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

Je n'ai pas encore inclus d'infobulles sur plusieurs lignes, ce qui nécessiterait plusieurs éléments <tspan> Et un habillage Word manuel.

2
Peter Collingridge

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
1
Aravind Cheekkallur