Wie eine SVG „Tooltip“ -ähnliche Box erstellen?

Question

ein vorhandenes gültiges SVG-Dokument gegeben, was der beste Weg ist „Informations Popups“ zu schaffen, so dass, wenn Sie auf bestimmte Elemente schweben oder klicken Sie auf (sagen wir mal) Sie einen Kasten mit einer beliebigen Menge Popup (also nicht nur eine einzige Zeile Tooltip) zusätzliche Informationen?

Dies sollte korrekt zumindest in Firefox angezeigt werden und unsichtbar sein, wenn das Bild zu einem Bitmap-Format gerastert wurde.

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>

Weitere Erläuterungen finden Sie

Answer 2

Diese Frage im Jahr 2008 SVG gefragt wurde, hat sich in den dazwischenliegenden 4 Jahre rasch verbessert. Jetzt Tooltips sind vollständig in allen Plattformen unterstützt Ich bin mir dessen bewusst. Verwenden Sie einen <title>-Tag (kein Attribut) und Sie erhalten eine native Tooltip erhalten.

Hier sind die Dokumente: https://developer.mozilla.org/en-US/docs/SVG / Element / title

Da das <set> Element funktioniert nicht mit Firefox 3, ich glaube, Sie haben ECMAScript zu verwenden.

Wenn Sie das folgende Skript Element in Ihre SVG hinzufügen:

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

Sie müssen onload="init(evt)" in das SVG-Element hinzufügen, um die init () Funktion aufzurufen.

Dann bis zum Ende des SVG, fügen Sie den Tooltip-Text:

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

Schließlich, um jeweils das Element, das Sie die Mouseover-Funktion Add haben wollen:

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

Ich habe eine ausführlichere Erklärung mit verbesserter Funktionalität unter http: // www.petercollingridge.co.uk/interactive-svg-components/tooltip

habe ich noch nicht mehrzeiligen Tooltips enthält, die mehr <tspan> Elemente und manuellen Zeilenumbruch erfordern würde.

Dies sollte funktionieren:

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 3

Diese Frage im Jahr 2008 SVG gefragt wurde, hat sich in den dazwischenliegenden 4 Jahre rasch verbessert. Jetzt Tooltips sind vollständig in allen Plattformen unterstützt Ich bin mir dessen bewusst. Verwenden Sie einen <title>-Tag (kein Attribut) und Sie erhalten eine native Tooltip erhalten.

Hier sind die Dokumente: https://developer.mozilla.org/en-US/docs/SVG / Element / title

Answer 4

Da das <set> Element funktioniert nicht mit Firefox 3, ich glaube, Sie haben ECMAScript zu verwenden.

Wenn Sie das folgende Skript Element in Ihre SVG hinzufügen:

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

Sie müssen onload="init(evt)" in das SVG-Element hinzufügen, um die init () Funktion aufzurufen.

Dann bis zum Ende des SVG, fügen Sie den Tooltip-Text:

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

Schließlich, um jeweils das Element, das Sie die Mouseover-Funktion Add haben wollen:

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

Ich habe eine ausführlichere Erklärung mit verbesserter Funktionalität unter http: // www.petercollingridge.co.uk/interactive-svg-components/tooltip

habe ich noch nicht mehrzeiligen Tooltips enthält, die mehr <tspan> Elemente und manuellen Zeilenumbruch erfordern würde.

Answer 5

Dies sollte funktionieren:

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