¿Cómo crear un cuadro SVG tipo “información sobre herramientas”?

Question

Dado un documento SVG válido existente, ¿cuál es la mejor manera de crear "ventanas emergentes informativas", de modo que cuando pase el cursor o haga clic en ciertos elementos (digamos), aparezca un cuadro con una cantidad arbitraria (es decir,¿No es solo una información sobre herramientas de una sola línea) de información adicional?

Esto debería mostrarse correctamente al menos en Firefox y ser invisible si la imagen se rasterizó en un formato de mapa de bits.

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>

Se puede encontrar más explicación. aquí.

Answer 2

Esta pregunta se hizo en 2008.SVG ha mejorado rápidamente en los cuatro años transcurridos.Ahora la información sobre herramientas es totalmente compatible con todas las plataformas que conozco.Usar una <title> etiqueta (no un atributo) y obtendrá información sobre herramientas nativa.

Aquí están los documentos:https://developer.mozilla.org/en-US/docs/SVG/Element/title

Answer 3

desde el <set> El elemento no funciona con Firefox 3, creo que debes usar ECMAScript.

Si agrega el siguiente elemento de secuencia de comandos en su 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>

Necesitas agregar onload="init(evt)" en el elemento SVG para llamar a la función init().

Luego, al final del SVG, agregue el texto de información sobre herramientas:

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

Finalmente, a cada uno de los elementos que desea que tenga la función de mouseover agregue:

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

He escrito una explicación más detallada con funcionalidad mejorada en http://www.petercollingridge.co.uk/interactive-svg-components/tooltip

Todavía no he incluido información sobre herramientas de varias líneas, lo que requeriría varias <tspan> elementos y ajuste manual de palabras.

Answer 4

Esto debería funcionar:

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