Javascript 为什么'；TwitterBootstrap popover是否可以使用SVG元素？ 我更喜欢C++，但是我现在正在处理一些Web UI的东西。我似乎无法在SVG元素上显示引导弹出框

有什么想法吗？popover在普通div上工作

JSFIDLE在这里：

在这里停下来买一个爆米花。

$（文档）.ready（函数（）{
var numCircles=$（“圆”）。长度；
console.log（“numircles=“+numircles”）；
$（“圆圈”）.popover（{触发器：'hover'，位置：'bottom'，标题：'title！'，内容：'content'}）；
$（“圆圈”）.css（{“笔划”：“蓝色”}）；
$（“.well”）.popover（{触发器：'hover'，位置：'bottom'，标题：'title！'，内容：'content'}）；
} );

您没有选择svg来打开popover，这就是它无法打开的原因。看这里

---

从这个例子来看，您需要修改引导程序才能使其正常工作

在bootstrap-tooltip.js下替换：

$tip
    .detach()
    .css({ top: 0, left: 0, display: 'block' })
    .insertAfter(this.$element)

pos = this.getPosition(inside)

与

基本上有两个问题：1）bootstrap将工具提示/popover的div插入到SVG中，浏览器会忽略它；2）需要从SVG计算位置信息

我已经在Github上提交了一个拉取请求

更新：看起来bootstrap 2.3.0+将通过新的工具提示/弹出框的

容器
属性支持此功能。使用SVG时，将
容器
设置为
主体
。请参见此处的评论

例如：

svg.selectAll(".node").each(
    function(d,i){
        $(this).popover({title:"title", content:"content", container:"body"});
        // and/or $(this).tooltip({title:"tooltip - title", container:"body"});
    });

在最新版本的Bootstrap中，添加一个包含HTML元素的
容器
选项似乎足以让它工作

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

这个问题可能会帮助您：但是，我无法让他们的解决方案在FF15上工作。啊，所以答案是SVG有一个类似但不兼容的API，Bootstrap/jQuery无法处理它。可爱。看来我得自己打开弹出窗口了。我想是使用了引导式popover，但我不能完全理解代码。感谢您的评论。这将在SVG上打开一个整体的popover，但是，要清楚，我理想的情况是在SVG内的元素上打开一个popover。例如，如果我有两个圆圈，我希望每个圆圈都有不同的弹出框。制作两个svg不是更好吗？我将有几千个svg元素，每个元素代表一个唯一的数据点。我希望popover提供有关唯一数据点的信息。将每个元素放入单独的SVG容器似乎不可行。是我想做的一个很好的例子。。。幸运的是，您可以读取它的源代码。：-）谢谢我看到你在亚历山大；我在华盛顿。我很乐意在下周某个时候给你买一杯快乐时光啤酒。你可以发电子邮件给我jon@lightboxtechnologies.com.Thanks很多技巧。添加容器选项对我来说很有效。注意：我用它在Openlayer上显示弹出窗口…另一个有用的参数是“视口”。这将使popover保持在此元素的范围内。我通常将其设置为container SVG元素。我想最好将容器更改为
container:“body
。顺便说一句，这是一个很好的解决方案。。
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)
    }

svg.selectAll(".node").each(
    function(d,i){
        $(this).popover({title:"title", content:"content", container:"body"});
        // and/or $(this).tooltip({title:"tooltip - title", container:"body"});
    });

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