The mouseover an SVG element, with a <title>
child element is the easiest choice, when it can be shortened. Both FF/Chrome will extend it in a single line. IE will automatically limit it to about 50 characters. The following will take a looooong tooltip and break its line, inserting line breaks(\n) at the desired location between words. The String.prototpye function can be applied before/after filling the <title>
text.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SVG ToolTip line breaks</title>
</head>
<body>
<center>
Three Elements Contained in a <g>, plus a <title> element,<br /> used as its tooltip.<br />
<svg width=400 height=400>
<g>
<circle cx=150 cy=150 r=60 fill=red />
<rect x=200 y=200 width=60 height=60 fill=lime />
<ellipse cx=300 cy=300 rx=60 ry=20 fill=blue />
<title id=myToolTip>This is a tool tip for this symbol (a group of elements), that will help describe what it is</title>
</g></svg>
<br /><button onClick=wrapToolTip(25)>wrap tooltip</button>
</center>
</body>
<script>
/* --- Adds SVG line break at space between words when it would exceed the max length
(or if a single loooong word exceeds the Max Line length)
Also usable for HTML line break by including true arg---
*/
String.prototype.fullWrap= function(maxLineLength,htm){
var str1, tem, ax, diff, lim, S= [], br;
var A= this.split(/\\s*\//);
while(A.length){
str1= A.shift();
while(str1 && str1.length> maxLineLength){
if(ax=== 0 && /^\\S/.test(str1)) S[S.length-1]+= '-';
tem= str1.substring(0, maxLineLength);
ax= tem.lastIndexOf(' ')+ 1;
if(ax== 0){
S.push(str1.substring(0, maxLineLength-1));
str1= str1.substring(maxLineLength-1);
}
else{
tem= str1.substring(0, ax);
str1= str1.substring(ax);
S.push(tem);
}
}
if(str1) S.push(str1);
}
if(htm)
br="<br/>" //--html--
else
br="\n" //----text line break
return S.join(br);
}
function wrapToolTip(maxLen)
{
myToolTip.firstChild.data=myToolTip.firstChild.data.fullWrap(maxLen)
}
</script>
</html>
<title></title>
the way you're using it above. It's totally wrong. instead use<[element] title="" />