如何使用SVG对象显示引导工具提示? [英] How do I show a bootstrap tooltip with an SVG object?
问题描述
我会疯狂地试图理解为什么我可以在常规HTML元素上显示工具提示,而不是在D3生成的SVG上显示工具提示: http://jsfiddle.net/nachocab/eQmYX/5/
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/
我做错了什么?
$(document).ready(function () {
$("a").tooltip({
'placement': 'bottom'
}); // this works
$("my_circle").tooltip({
'placement': 'bottom'
}); // this does not work
});
推荐答案
问题是Bootstrap v2.2.2 generate是< svg>
内插入的< div>
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.
我最后使用的最新开发版本引导工具提示,它添加一个新参数来确定工具提示的容器。现在我可以做:
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:
$(".my_circle").tooltip({
'container': 'body',
'placement': 'bottom'
}); // this works!
EDIT - 一年后
为了记录,我删除了jQuery的要求,现在我使用了优秀的 d3-提示。Justin Palmer。
For the record, I dropped the jQuery requirement and I'm now using the excellent d3-tip by Justin Palmer.
这篇关于如何使用SVG对象显示引导工具提示?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!