Comment faire pour afficher une info-bulle pour le texte en SVG?

J'ai besoin d'une info-bulle lorsque l'utilisateur place le pointeur sur le texte en SVG. Aussi, le texte et l'info-bulle d'un contenu doivent être modifiables avec javascript.

Les travaux suivants dans Firefox, mais pas de Chrome. Quelle est la manière correcte de le faire?

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 (avec jQuery):

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

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

OriginalL'auteur Victor Lyuboslavsky | 2013-10-28