svg上的引导弹出窗口答案

【问题标题】：Bootstrap popover on svgsvg上的引导弹出窗口
【发布时间】：2017-04-05 06:50:51
【问题描述】：

根据w3schools.com，为了使弹出框出现在链接旁边，我只需要使用这个HTML：

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

我的问题是：当我点击一个 svg 元素时，如何让弹出框出现？我试过这个：

<svg width="100" height="100">
    <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </a>
</svg>

基本上，我所做的只是在链接中粘贴一个 svg 形状，但它不起作用。
如何在单击 svg 时显示弹出框？

任何帮助将不胜感激。

【问题讨论】：

标签： javascript html css twitter-bootstrap svg

【解决方案1】：

我想出了解决办法。在制作弹出框时，引导程序会在父容器内生成一个 div 元素。显然，当它在 svg 中时，这不起作用。所以这里是解决方案，给它一个data-container设置为body你也可以去掉a元素，直接添加到circle元素中。

<svg width="100" height="100">
  <a data-toggle="popover" data-container="body" title="Popover Header" data-content="Some content inside the popover" data-placement="right">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </a>
</svg>


<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});
</script>

【讨论】：

问题是我想要有多个不同的 svg 形状来产生不同的弹出框。我需要所有的形状都在一个 svg 元素内。
CyberBurst 我已经更新了我的答案，现在可以使用了。它将允许您为每个形状设置它以拥有自己的弹出框:)

【解决方案2】：

将 data-toggle="popover" title="Popover Header" data-content="Some content inside the popover" 移动到 SVG。它会起作用。

【讨论】：

虽然这确实有效，但我真的希望 data-toggle="popover" 等出现在我的圆形元素上。当我将它添加到圈子时，它仍然不起作用。
试试这个。当您调用 popover 时，将容器作为主体。
$('[data-toggle="popover"]').popover({container:'body'});

【解决方案3】：

我并不清楚上面接受的答案，但您可以将任何元素放在data-container="" 中。例如，如果您的 SVG 位于某个 <div class="svg-container></div> 中，您可以将此类作为“数据容器”的值，如下所示： data-container=".svg-container"。这比将data-container="body" 作为一个值要好，因为在这种情况下，所有弹出框都将位于正文的最底部，并具有一些不需要/意外的行为（例如，当页面调整大小时）。

【讨论】：

【解决方案4】：

试着把它放在你的脚本标签里

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

【讨论】：