XML Elves

Hi does anyone know how to implement tooltips for each element in svg? Possibly using java script

Nothing already exists in SVG spec like "alt" in HTML, so i have implemented something like this but it must be optimized to be more global (position...etc.) :

function GetTrueCoords(evt) {

newScale = SVGRoot.currentScale;
translation = SVGRoot.currentTranslate;
TrueCoords.x = (evt.clientX - translation.x)/newScale;
TrueCoords.y = (evt.clientY - translation.y)/newScale;

}


function ShowTooltip(evt, turnOn, text) {
try {
if (!evt || !turnOn) {

var node = SVGDocument.getElementById('tooltip')
var nodeText = SVGDocument.getElementById('tooltipText')
SVGRoot.removeChild(node)
SVGRoot.removeChild(nodeText)

} else {
GetTrueCoords(evt);
var xRectPos = TrueCoords.x - 50;
var yRectPos = TrueCoords.y - 35;
var xTextPos = xRectPos + 8;
var yTextPos = yRectPos + 15;

// Create rect node
var myRect = evt.target.ownerDocument.createElementNS(null,"rec t");
myRect.setAttributeNS(null,"id","tooltip");
myRect.setAttributeNS(null,"x",xRectPos);
myRect.setAttributeNS(null,"y",yRectPos);
myRect.setAttributeNS(null,"rx","3");
myRect.setAttributeNS(null,"ry","3");
myRect.setAttributeNS(null,"fill-opacity", "0.7");
myRect.setAttributeNS(null,"width",text.length*8);
myRect.setAttributeNS(null,"height","20");
myRect.setAttributeNS(null,"fill","white");
myRect.setAttributeNS(null,"stroke","blue");
SVGRoot.appendChild(myRect);

// Create text node to insert
var textNode = evt.target.ownerDocument.createElementNS(null,"tex t");
textNode.setAttributeNS(null,"id","tooltipText");
textNode.setAttributeNS(null,"x",xTextPos);
textNode.setAttributeNS(null,"y",yTextPos);
textNode.setAttributeNS(null,"style","fill:blue;fo nt-size:13;text-anchor:start;");
textNode.appendChild(evt.target.ownerDocument.crea teTextNode(text));

SVGRoot.appendChild(textNode);
}

} catch(er){}
}

okay now how would i call those functions inside the svg from an external java script that has been written?

How do i use this code in svg now so users can move the mouse on an svg element and have a tool tip? This javascript must be used extenally though in an extenal js file rather then inbedded in the svg file





function GetTrueCoords(evt) {

newScale = SVGRoot.currentScale;
translation = SVGRoot.currentTranslate;
TrueCoords.x = (evt.clientX - translation.x)/newScale;
TrueCoords.y = (evt.clientY - translation.y)/newScale;

}


function ShowTooltip(evt, turnOn, text) {
try {
if (!evt || !turnOn) {

var node = SVGDocument.getElementById('tooltip')
var nodeText = SVGDocument.getElementById('tooltipText')
SVGRoot.removeChild(node)
SVGRoot.removeChild(nodeText)

} else {
GetTrueCoords(evt);
var xRectPos = TrueCoords.x - 50;
var yRectPos = TrueCoords.y - 35;
var xTextPos = xRectPos + 8;
var yTextPos = yRectPos + 15;

// Create rect node
var myRect = evt.target.ownerDocument.createElementNS(null,"rec t");
myRect.setAttributeNS(null,"id","tooltip");
myRect.setAttributeNS(null,"x",xRectPos);
myRect.setAttributeNS(null,"y",yRectPos);
myRect.setAttributeNS(null,"rx","3");
myRect.setAttributeNS(null,"ry","3");
myRect.setAttributeNS(null,"fill-opacity", "0.7");
myRect.setAttributeNS(null,"width",text.length*8);
myRect.setAttributeNS(null,"height","20");
myRect.setAttributeNS(null,"fill","white");
myRect.setAttributeNS(null,"stroke","blue");
SVGRoot.appendChild(myRect);

// Create text node to insert
var textNode = evt.target.ownerDocument.createElementNS(null,"tex t");
textNode.setAttributeNS(null,"id","tooltipText");
textNode.setAttributeNS(null,"x",xTextPos);
textNode.setAttributeNS(null,"y",yTextPos);
textNode.setAttributeNS(null,"style","fill:blue;fo nt-size:13;text-anchor:start;");
textNode.appendChild(evt.target.ownerDocument.crea teTextNode(text));

SVGRoot.appendChild(textNode);
}

} catch(er){}
}