Jon*_*art 19 javascript jquery svg twitter-bootstrap
我更像是一个C++人,但我现在正在研究一些Web UI.我似乎无法在SVG元素上显示Bootstrap popover.
有任何想法吗？popover适用于普通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>
Kri*_*rle 25
从该示例看,您需要修改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"});
});
Dir*_*nry 16
使用最新版本的Bootstrap,添加一个container带有HTML元素的选项似乎足以让它工作!
$("circle").each(function () {
$(this).popover({
title: "Hi!",
content: "popover",
container: $("#container")
});
});
Cha*_*kjh -1
您尚未选择 svg 来打开弹出窗口，这就是它无法打开的原因。看这里http://jsfiddle.net/JjAht/1/
$("svg").popover({trigger:'hover', placement:'bottom', title:'Title!', content:'Content'});