How to show tooltip for text in SVG?

Question

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/

score 28 · Accepted Answer · answered Oct 28 '13 at 14:34

28

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>

answered Oct 28 '13 at 14:34

Robert Longson

118,664
26
252
242

With tooltip being part of the text body, how to modify the text while keeping the tooltip? Like: `$('#text1').text('newText');` – Victor Lyuboslavsky Oct 28 '13 at 15:06
That will modify the tooltip text. I'm asking how to modify the text text without blowing away the tooltip. – Victor Lyuboslavsky Oct 28 '13 at 15:12
1

$('#text1').contents().eq(1).wrap("
").parent().text('New').contents().unwrap(); – Robert Longson Oct 28 '13 at 15:23

score 5 · Answer 2 · answered Mar 12 '17 at 09:03

You can use the <title> element.

Note that those implementations that do use <title> to display a tooltip often will only do so if the <title> is indeed the first child element of its parent.

From https://developer.mozilla.org/en/docs/Web/SVG/Element/title

So, in your example, that would be

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100" height="100">
   <title id="title1">This is a tooltip</title>
   <rect width="100" height="100" style="fill:black;stroke-width:0"></rect>
   ...

How to show tooltip for text in SVG?

2 Answers2

Linked