Victor Lyuboslavsky Victor Lyuboslavsky - 9 months ago 110
Javascript Question

How to show tooltip for text in SVG?

I need a tooltip when the user hovers over text in SVG. Also, the text and the tooltip content should be modifiable with javascript.

The following works in Firefox but not Chrome. What's the correct way to do this?

HTML:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100" height="100">
<rect width="100" height="100" style="fill:black;stroke-width:0"></rect>
<text id="text1" x="50" y="15" text-anchor="end">text1</text>
<text id="text2" x="80" y="15" text-anchor="end"
transform="translate(0,50)">text2</text>
</svg>


Javascript (with jQuery):

$('#text1').attr('title', 'Tooltip 1');
$('#text2').attr('title', 'Tooltip 2');


My jsfiddle: http://jsfiddle.net/getvictor/ctaVA/

Answer Source

A title child element will act as a tooltip.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100" height="100">
    <rect width="100" height="100" style="fill:black;stroke-width:0"></rect>
    <text id="text1" x="50" y="15" text-anchor="end"><title>Tooltip 1</title>text1</text>
    <text id="text2" x="80" y="15" text-anchor="end"
      transform="translate(0,50)"><title>Tooltip 2</title>text2</text>
</svg>