为什么 Twitter Bootstrap 弹出框不适用于 SVG 元素？答案

【问题标题】：Why doesn't Twitter Bootstrap popover work with SVG elements?为什么 Twitter Bootstrap 弹出框不适用于 SVG 元素？
【发布时间】：2012-12-19 00:10:46
【问题描述】：

我更像是一个 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>

【问题讨论】：

这个问题可能对你有帮助：stackoverflow.com/questions/3294553/… 但是，我无法让他们的解决方案在 FF15 上运行。
啊，所以答案是SVG有类似但不兼容的API，Bootstrap/jQuery无法处理。迷人的。看起来我将不得不推出自己的弹出窗口。 This example 使用 Bootstrap 弹出框（我认为），但我无法遵循所有代码。感谢您的评论。

标签： javascript jquery twitter-bootstrap svg

【解决方案1】：

从该示例看来，您需要修改 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）引导程序将工具提示/弹出框的 div 插入到浏览器忽略它的 SVG 中；2）需要从 SVG 计算位置信息

我已将此作为拉取请求提交到 Github https://github.com/twitter/bootstrap/pull/6521

更新： 看起来 bootstrap 2.3.0+ 将通过用于工具提示/弹出框的新 container 属性支持此功能。使用 SVG 时，将 container 设置为 body。在这里查看 cmets 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"});
    });

【讨论】：

谢谢！我看到你在亚历山大；我在华盛顿。我很乐意下周某个时候给你买一杯欢乐时光啤酒。您可以发送电子邮件至 jon@lightboxtechnologies.com。
非常感谢您提供的技巧。添加容器选项对我有用。注意：我正在使用它在 Openlayer 上显示弹出窗口...
另一个有用的参数是'viewport'。这使弹出框保持在此元素的范围内。我通常将其设置为容器 SVG 元素

【解决方案2】：

使用最新版本的 Bootstrap，添加一个带有 HTML 元素的 container 选项似乎足以让它工作！

$("circle").each(function () {
    $(this).popover({
        title: "Hi!",
        content: "popover",
        container: $("#container")
    });
});

【讨论】：

我想最好将容器更改为container: "body..顺便说一句，那里有很好的解决方案..

【解决方案3】：

您尚未选择 svg 来打开弹出框，这就是它无法打开的原因。看这里http://jsfiddle.net/JjAht/1/

    $("svg").popover({trigger:'hover', placement:'bottom', title:'Title!', content:'Content'});

【讨论】：

这会在整个 SVG 上打开一个弹出框，但是，需要明确的是，我最喜欢的是 svg 内元素的弹出框。例如，如果我有两个圆圈，我希望每个圆圈都有不同的弹出框。
制作2个svg不是更好吗？
我将有几千个 SVG 元素，每个元素代表一个唯一的数据点。我希望弹出框显示有关唯一数据点的信息。将每个元素放入单独的 SVG 容器中似乎并不可行。 This site 是我想做的一个很好的例子......幸运的是，人们可以阅读它的源代码。 :-)