SVGオブジェクトでブートストラップのツールチップを表示するにはどうすればよいですか？

Question

私はD3-生成SVGsに通常のHTML要素にツールチップを表示することはできませんが、理由を理解しようとしておかしくなりそうだ：http://jsfiddle.net/nachocab/eQmYX/5/

私が間違って何をしているのですか？

$(document).ready(function() { 
    $("a").tooltip({ 
     'placement': 'bottom' 
    }); // this works 

    $("my_circle").tooltip({ 
     'placement': 'bottom' 
    }); // this does not work 
}); 

Answer 1

問題は、ブートストラップv2.2.2が生成するツールチップは、ブラウザがそれをレンダリングしないように<svg>、内部に挿入されたばかり<div>であるということでした。

最新の開発バージョンBootstrap Tooltipを使用しましたが、これは新しいパラメータを追加してツールチップのコンテナを決定します。今、私にできること：

$(".my_circle").tooltip({ 
    'container': 'body', 
    'placement': 'bottom' 
}); // this works! 

EDIT - 一年後

を記録するために、私はjQueryの要件を落とし、私は今、ジャスティン・パーマーことにより、優れたd3-tipを使用しています。

Answer 2

d3-bootstrapライブラリを使用してください。 このライブラリは、D3.jsに対応したアラート、ポップオーバー、およびツールチップの機能を提供します jsFiddleに次のコードを追加できます。

頭の部分にこれを追加します。

<script src="https://github.com/shawnbot/d3-bootstrap/blob/master/d3-bootstrap.js"/> 

コード部分にこれを追加します。

d3.selectAll(".my_circle") 
    .call(d3.tooltip().placement("right"));