Wie erstellt man eine SVG- "Tooltip" -ähnliche Box?

Gegeben ein vorhandenes gültiges SVG-Dokument, was ist der beste Weg, um "informative Popups" zu erstellen, so dass wenn Sie den Mauszeiger über bestimmte Elemente (sagen wir), ein Feld mit einem beliebigen Betrag (dh nicht nur eine einzige Tooltip)) von zusätzlichen Informationen?Wie erstellt man eine SVG- "Tooltip" -ähnliche Box?

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

Quelle

2008-09-19 morais

Morais es könnte helfen, wenn Sie die Frage ein wenig verengt. Vielleicht ein bisschen genauer, welche Technologien Ihnen zur Verfügung stehen und welche Browser Sie unterstützen müssen (Firefox und was noch?) Nur ein Vorschlag. –

Die angenommene Antwort ist jetzt veraltet und die von Neil Fraser ist immer noch korrekt. – Craig

<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 Erklärung finden Sie here.

Quelle

2008-09-19 21:07:58 Sparr

Dies scheint nicht auf Firefox 3.0.1 zu funktionieren - soll es? – morais

Die Verwendung von 'set' funktioniert nicht mit Firefox 3 –

Der Link zu IBM Site ist jetzt unterbrochen. – kasuparu

Da das <set> Element nicht mit Firefox 3 funktioniert, denke ich, dass Sie ECMAScript verwenden müssen.

Wenn Sie fügen Sie das folgende Skript Element in Ihre 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>

Sie benötigen 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 zu jedem Element, das Sie die Mouseover-Funktion Add haben wollen:

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

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

geschrieben Ich habe noch keine Multi-Linien-Tooltips enthalten, die mehrereerfordern würdenElemente und manuelle Wortumhüllung.

Quelle

2011-01-28 18:52:39

Diese Frage wurde im Jahr 2008 gestellt. SVG hat sich in den dazwischen liegenden vier Jahren schnell verbessert. Jetzt werden Tooltips in allen mir bekannten Plattformen vollständig unterstützt. Verwenden Sie ein <title> Tag (kein Attribut) und Sie erhalten einen nativen Tooltip.

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

Quelle

2012-10-15 22:11:13

Hinweis: Dies scheint nicht zu funktionieren, wenn Sie es dynamisch mit Javascript hinzufügen. – bzuillsmith

Auch können Sie nicht native Tooltips stylen :( – CpILL

Ich habe dies mit dem d3-Visualization-Framework verwendet, um einen Tooltip mit Javascript hinzuzufügen, und es funktionierte für mich in den letzten Versionen von Chrome und Firefox. Code war so etwas wie 'chart.selectAll ("g.cell.child"). append ("title"). text (Funktion (d) {return d.Größe;}); ' – Pat

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

Quelle

2013-08-21 08:35:16

Wie erstellt man eine SVG- "Tooltip" -ähnliche Box?

Antwort

Verwandte Themen