Adding tooltip to SVG rect tag

Question

What is the best solution to add a tooltip to <rect> ?

I created an SVG map with several <rect> tags, and I would like to show a tooltip for the mouse. Using the title attribute is fine, but is there any option how to reinstall it using CSS / Javascript / jQuery or is there an even better option for adding a tooltip?

 <svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" xml:space="preserve"> <g> <rect id="1" title="There some text" x="0" y="0" fill="#666666" width="20" height="20"/> <rect id="2" title="There another text" x="30" y="0" fill="#666666" width="20" height="20"/> </g> </svg> 

Answer 1

SVG uses header elements, not attributes, however you cannot style them. If you need a style, you will need to create the header dynamically as a <text> element and put it in the right place using javascript.

This is what the default tooltips look like ...

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" xml:space="preserve"> <g> <rect id="1" fill="#666666" width="20" height="20"> <title>There some text</title> </rect> <rect id="2" x="30" fill="#666666" width="20" height="20"> <title>There another text</title> </rect> </g> </svg> 

Answer 2

I tried your code, but it does not work (Chrome). Then I found a hint message on this site:

How to add tooltip to svg graphics?

so instead of adding the title attribute you need to do the following:

 <rect id="1" x="0" y="0" fill="#666666" width="20" height="20"><title>"There some text"</title/></rect> 

UPDATE

you can change text and style with javascript and jquery

Example:

 $("#1").find("title").html("Text")