28

我要疯了，试图理解为什么我可以在常规 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
});
4

2 回答 2

58

问题是 Bootstrap v2.2.2 生成的工具提示是一个<div>被插入到 中的<svg>，这使得浏览器无法呈现它。

我最终使用了Bootstrap Tooltip的最新开发版本，它添加了一个新参数来确定工具提示的容器。现在我可以这样做：

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

编辑 - 一年后

作为记录，我放弃了 jQuery 要求，现在使用 Justin Palmer 的优秀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 回答