javascript - SVGでテキストのツールチップを表示するには?

Question

ユーザーが SVG のテキストにカーソルを合わせたときにツールチップが必要です。また、テキストとツールチップのコンテンツは JavaScript で変更できる必要があります。

以下は Firefox では機能しますが、Chrome では機能しません。これを行う正しい方法は何ですか？

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 (jQuery を使用):

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

私の jsfiddle: http://jsfiddle.net/getvictor/ctaVA/