Come creare una scatola simile a SVG & # 8220; tooltip & # 8221;

Question

Dato un documento SVG valido esistente, qual è il modo migliore per creare " popup informativi " ;, in modo che quando passi il mouse o fai clic su determinati elementi (diciamo) apri una casella con un importo arbitrario (cioè non solo un singolo line tooltip) di informazioni extra?

Questo dovrebbe essere visualizzato correttamente almeno in Firefox ed essere invisibile se l'immagine è stata rasterizzata in un formato bitmap.

Answer 1

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

Ulteriori spiegazioni sono disponibili qui .

Answer 2

Questa domanda è stata posta nel 2008. SVG è migliorata rapidamente nei quattro anni successivi. Ora i tooltip sono pienamente supportati in tutte le piattaforme di cui sono a conoscenza. Utilizza un tag < title > (non un attributo) e otterrai una descrizione comandi nativa.

Ecco i documenti: https://developer.mozilla.org/en-US/docs/SVG / Elemento / title

Answer 3

Poiché l'elemento < set > non funziona con Firefox 3, penso che devi usare ECMAScript.

Se aggiungi il seguente elemento di script nel tuo 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>

Devi aggiungere onload = " init (evt) " nell'elemento SVG per chiamare la funzione init ().

Quindi, alla fine del file SVG, aggiungi il testo del suggerimento:

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

Infine, a ciascuno degli elementi che si desidera avere la funzione mouseover aggiungere:

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

Ho scritto una spiegazione più dettagliata con funzionalità migliorate a http: // www.petercollingridge.co.uk/interactive-svg-components/tooltip

Non ho ancora incluso tooltip multilinea, che richiederebbero più elementi < tspan > e il wrapping manuale delle parole.

Answer 4

Questo dovrebbe funzionare:

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