28

D3で生成されたSVGではなく通常の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
});
4

2 に答える 2

58

問題は、Bootstrap v2.2.2が生成するツールチップが、の<div>中に挿入されて<svg>いたため、ブラウザがそれをレンダリングしないことでした。

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

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

編集-1年後

記録のために、私はjQuery要件を削除し、現在はJustinPalmerによる優れたd3-tipを使用しています。

于 2013-02-06T18:34:23.010 に答える
4

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") );
于 2013-02-05T06:05:31.730 に答える