Como criar uma “dica” SVG caixa -como?

Question

Dado um documento SVG válido existente, qual é a melhor maneira de criar "popups informativos", de modo que quando você passa o mouse ou clicar em certos elementos (digamos) você aparecer uma caixa com uma quantidade arbitrária (ou seja, não apenas uma única linha tooltip) de informações extra?

Isso deve exibir corretamente, pelo menos no Firefox e ser invisível se a imagem foi convertida em bitmap para um 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>

Além disso explicação pode ser encontrada aqui .

Answer 2

Esta pergunta foi feita em 2008. SVG melhorou rapidamente nos intervenientes quatro anos. Agora as dicas são totalmente suportados em todas as plataformas eu estou ciente de. Use uma tag <title> (não um atributo) e você vai ter uma dica de ferramenta nativa.

Aqui estão os documentos: https://developer.mozilla.org/en-US/docs/SVG / Elemento / title

Answer 3

Uma vez que o elemento <set> não funciona com Firefox 3, eu acho que você tem que usar ECMAScript.

Se você adicionar o seguinte elemento script em seu 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>

Você precisa adicionar onload="init(evt)" no elemento SVG para chamar a função init ().

Então, ao final do SVG, adicione o texto dica:

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

Finalmente, para cada um dos elemento que você quer ter a função de mouseover add:

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

Eu escrevi uma explicação mais detalhada com funcionalidade melhorada em http: // www.petercollingridge.co.uk/interactive-svg-components/tooltip

Eu ainda não incluíram dicas de ferramentas multi-linha, o que exigiria vários elementos <tspan> e quebra de linha manual.

Answer 4

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