我更喜欢 C++，但目前我正在研究一些 Web UI 的东西。我似乎无法在 SVG 元素上显示 Bootstrap 弹出框。
有什么想法吗？弹出窗口适用于普通 div。
jsFiddle 在这里:http://jsfiddle.net/JjAht/
<!DOCTYPE html>
<html>
<head>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/bootstrap.min.js"></script>
</head>
<body>
<div>
<svg width="100" height="100">
<circle r="45" cx="50" cy="50" style="fill: red"/>
</svg>
</div>
<div class="well">
<p>
Hover here for a popover.
</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
var numCircles = $("circle").length;
console.log("numCircles = " + numCircles);
$("circle").popover({trigger:'hover', placement:'bottom', title:'Title!', content:'Content'});
$("circle").css({"stroke":"blue"});
$(".well").popover({trigger:'hover', placement:'bottom', title:'Title!', content:'Content'});
} );
</script>
</body>
</html>
最佳答案
从该示例来看，您似乎需要修改 Bootstrap 才能使其正常工作。
在 bootstrap-tooltip.js 下替换:
$tip
.detach()
.css({ top: 0, left: 0, display: 'block' })
.insertAfter(this.$element)
pos = this.getPosition(inside)
与
if($('#'+this.$element[0].id,$('svg')).length > 0){
$tip
.remove()
.css({ top: 0, left: 0, display: 'block' })
.prependTo(document.body)
pos = $.extend({}, this.$element.offset(), {
width: this.$element[0].getBoundingClientRect().width
, height: this.$element[0].getBoundingClientRect().height
})
} else {
$tip
.detach()
.css({ top: 0, left: 0, display: 'block' })
.insertAfter(this.$element)
pos = this.getPosition(inside)
}
基本上有两个问题 1) bootstrap 将工具提示/弹出窗口的 div 插入到 SVG 中，而浏览器会忽略它；2) 需要从 SVG 计算位置信息
我已将其作为拉取请求提交到 Github https://github.com/twitter/bootstrap/pull/6521
更新:看起来 bootstrap 2.3.0+ 将通过工具提示/弹出窗口的新 container 属性来支持此功能。使用 SVG 时，请将 container 设置为 body。请参阅此处的评论 https://github.com/twitter/bootstrap/pull/6521
一个例子:
svg.selectAll(".node").each(
function(d,i){
$(this).popover({title:"title", content:"content", container:"body"});
// and/or $(this).tooltip({title:"tooltip - title", container:"body"});
});
关于javascript - 为什么 Twitter Bootstrap 弹出窗口不能与 SVG 元素一起使用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13943582/