popup - fijo - ¿Cómo crear una caja tipo SVG "tooltip"?

tooltip master

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 ratón o haga clic en ciertos elementos (digamos) aparezca un cuadro con una cantidad arbitraria (es decir, no solo una información de línea) ¿información extra?

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

Answer 1

Como el elemento <set> no funciona con Firefox 3, creo que debe usar ECMAScript.

Si agrega el siguiente elemento de script 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>

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

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

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

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

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

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

Todavía no he incluido tooltips de varias líneas, que requerirían múltiples elementos <tspan> y envoltura manual de palabras.

Answer 2

Esta pregunta se realizó en 2008. SVG ha mejorado rápidamente en los cuatro años transcurridos. Ahora los tooltips son totalmente compatibles en todas las plataformas de las que tengo conocimiento. Use una etiqueta <title> (no un atributo) y obtendrá una información sobre herramientas nativa.

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

Answer 3

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

Answer 4

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

Puede encontrar más explicaciones here .