web-dev-qa-db-ja.com

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

通常のHTML要素にツールチップを表示できるが、D3で生成されたSVGには表示できない理由を理解しようとすることに夢中になります。 http://jsfiddle.net/nachocab/eQmYX/5/

何が悪いのですか？

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

    $("my_circle").tooltip({
      'placement': 'bottom'
    }); // this does not work
});
twitter-bootstrapsvgtooltipd3.js
27
nachocab

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

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

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

EDIT-1年後

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

55
nachocab

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") );
4
lephix