javascript - svg 上的 Bootstrap 弹出窗口

Question

根据 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 时如何显示弹出窗口？

如有任何帮助，我们将不胜感激。

Answer 1

我找到了解决方案。制作弹出窗口时， Bootstrap 会在父容器内生成一个 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>