[解決済み] svgグラフィックにツールチップを追加するには？

質問

私は一連のsvgの矩形（D3.jsを使用）があり、マウスオーバー時にメッセージを表示したいのですが、メッセージは背景として機能するボックスで囲まれている必要があります。メッセージは、背景として機能するボックスで囲まれている必要があります。これらは両方とも、互いに、矩形に完全に整列している必要があります（上部と中央）。これを行うための最良の方法は何ですか？

私は "x", "y", "width" and "height" 属性を使用して svg テキストを追加し、次に svg rect を前置することを試みました。問題は、テキストの基準点が真ん中にあることです（中央揃えにしたいので text-anchor: middle を使用しました)、矩形の場合は左上の座標です。さらに、テキストの周りに少し余白を取りたかったので、ちょっと面倒でした。

もう一つの選択肢はhtml divを使うことでした。これはテキストとパディングを直接追加できるので良いのですが、各矩形の絶対座標を取得する方法が分かりません。これを行う方法はあるのでしょうか？

どのように解決するのですか？

Phrogzが示したように、title要素を使用することができます。また、jQueryのTipsyのような優れたtooltipもあります。 http://onehackoranother.com/projects/jquery/tipsy/ (すべてのtitle要素を置き換えるのに使えます)、Bob Monteverdeのnvd3、あるいはTwitterのBootstrapにあるツールチップ http://twitter.github.com/bootstrap/