twitter-bootstrap 如何使用 SVG 对象显示引导工具提示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14697232/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I show a bootstrap tooltip with an SVG object?
提问by nachocab
I'm going crazy trying to understand why I can show tooltips on regular HTML elements, but not on D3-generated SVGs: http://jsfiddle.net/nachocab/eQmYX/5/
我疯狂地试图理解为什么我可以在常规 HTML 元素上显示工具提示，但不能在 D3 生成的 SVG 上显示：http: //jsfiddle.net/nachocab/eQmYX/5/
What am I doing wrong?
我究竟做错了什么？
$(document).ready(function () {
$("a").tooltip({
'placement': 'bottom'
}); // this works
$("my_circle").tooltip({
'placement': 'bottom'
}); // this does not work
});
回答by nachocab
The problem was that the tooltip that Bootstrap v2.2.2 generates is a <div>that was getting inserted inside the <svg>, which made the browser not render it.
问题是 Bootstrap v2.2.2 生成的工具提示<div>是被插入到 中的<svg>，这使得浏览器无法呈现它。
I ended up using the latest development version of Bootstrap Tooltip, which adds a new parameter to determine the container of the tooltip. Now I can do:
我最终使用了Bootstrap Tooltip的最新开发版本，它添加了一个新参数来确定工具提示的容器。现在我可以这样做：
$(".my_circle").tooltip({
'container': 'body',
'placement': 'bottom'
}); // this works!
EDIT - One year later
编辑 - 一年后
For the record, I dropped the jQuery requirement and I'm now using the excellent d3-tipby Justin Palmer.
作为记录，我放弃了 jQuery 要求，现在使用Justin Palmer出色的d3-tip。
回答by lephix
Use d3-bootstrap library. This library will provide you alert, popovers, and tooltip functionalities compatible for D3.js You can add following code to your jsFiddle.
使用 d3-bootstrap 库。该库将为您提供与 D3.js 兼容的警报、弹出窗口和工具提示功能。您可以将以下代码添加到您的 jsFiddle。
Add this in your head part.
将此添加到您的头部。
<script src="https://github.com/shawnbot/d3-bootstrap/blob/master/d3-bootstrap.js"/>
Add this in your code part.
将此添加到您的代码部分。
d3.selectAll(".my_circle")
.call( d3.tooltip().placement("right") );
