為什么Twitter Bootstrap popover不能與SVG元素一起使用？

Question

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

Answer 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）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"});
    });

Answer 2

使用最新版本的Bootstrap，添加一個帶有HTML元素的container選項似乎足以讓它工作！

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

Answer 3

你還沒有選擇svg打開一個popover，這就是它無法打開的原因。 看這里http://jsfiddle.net/JjAht/1/

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

為什么Twitter Bootstrap popover不能與SVG元素一起使用？

問題描述

3 個解決方案

解決方案1
25 2013-01-09 17:20:36

解決方案2
16 2013-05-30 17:33:18

解決方案3
-1 2012-12-24 18:06:40

為什么Twitter Bootstrap popover不能與SVG元素一起使用？

問題描述

3 個解決方案

解決方案1 25 2013-01-09 17:20:36

解決方案2 16 2013-05-30 17:33:18

解決方案3 -1 2012-12-24 18:06:40

解決方案1
25 2013-01-09 17:20:36

解決方案2
16 2013-05-30 17:33:18

解決方案3
-1 2012-12-24 18:06:40