爲什麼Twitter Bootstrap popover不能用於SVG元素？

我更喜歡C++的人，但我目前正在研究一些Web UI的東西。我似乎無法獲得Bootstrap彈出窗口以顯示在SVG元素上。爲什麼Twitter Bootstrap popover不能用於SVG元素？

任何想法？ 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>

來源

2012-12-19 Jon Stewart

這個問題可以幫助你：http://stackoverflow.com/questions/3294553/jquery-selector-svg-incompatible 但是，我不能讓上FF15他們的解決方案的工作。 –

啊，所以答案是SVG有一個類似但不兼容的API，而Bootstrap/jQuery無法處理它。可愛。看起來我必須推出自己的彈出窗口。 [此示例]（http://markhansen.co.nz/stolen-vehicles-pt2/）使用Bootstrap彈出窗口（我認爲），但我無法關注所有代碼。謝謝你的評論。 –

-1

你沒有選擇的SVG開酥料餅的，這就是爲什麼它不會打開。看看這裏http://jsfiddle.net/JjAht/1/

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

來源

2012-12-24 18:06:40 Chanckjh

這會在整個SVG上打開一個彈出窗口，但要清楚的是，我最喜歡的是svg內部元素的彈出窗口。例如，如果我有兩個圈子，每個人都喜歡不同的彈出。 –

然後製作2個svg會不會更好？ – Chanckjh

我將有幾千個SVG元素，每個代表一個唯一的數據點。我希望popover提供有關獨特數據點的信息。將每個元素放入單獨的SVG容器似乎不可行。 [這個網站]（http://markhansen.co.nz/stolen-vehicles-pt2/）是我想做的一個很好的例子...幸運的是，可以閱讀它的來源。 :-) –

從這個例子看起來你需要修改Bootstrap以使其工作。

在自舉-tooltip.js取代：

與

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

更新：看起來引導2.3.0+將通過一個新的container屬性提示/ popovers支持這一點。使用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"}); 
    });

來源

2013-01-09 17:20:36

謝謝！我看到你在亞歷山大;我在DC。我很樂意在下週的某個時候爲你買一杯歡樂時光啤酒。您可以發送電子郵件至[email protected]。 –

非常感謝這些技巧。添加容器選項正在爲我工作。注意：我使用它在Openlayer上顯示彈出窗口... –

另一個有用的參數是'視口'。這將彈出窗口保留在此元素的範圍內。我通常將其設置爲容器SVG元素 – elachell

自舉的最新版本，增加了container選項與HTML元素中似乎是不夠的，使其工作！

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

來源

2013-05-30 17:33:18

絕對震撼了我，非常感謝！ –

我想最好把容器改成'container：「body' ..順便說一下，這裏有很好的解決方案。 –

爲什麼Twitter Bootstrap popover不能用於SVG元素？

回答

相關問題