How To create a simple SVG tooltip

by barkkathulla 2013-05-16 09:39:07

To create a simple SVG tooltip

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


Instead of <set> element you can use use ECMAScript in Firefox 3...
The script detail is given below..

<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");
}
]]>
1024
like
0
dislike
0
mail
flag

You must LOGIN to add comments