Question

83

How to show tooltip for text in SVG?

rated 0 times [ 84] [ 1] / answers: 1 / hits: 17421 / 11 Years ago, mon, october 28, 2013, 12:00:00

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/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

josh

Add To Favorites

Follow

Total Points: 391

Total Questions: 112

Total Answers: 90

Location: Aruba

Member since Fri, Jun 24, 2022

2 Years ago

answered 11 Years ago keric · Accepted Answer

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>