在svg上的Bootstrap popover

Question

根据w3schools.com,为了在链接旁边显示一个popover,我需要使用的是这个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

我找到了解决方案.制作popover时,bootstrap会在父容器中生成div元素.显然,当它在svg里面时,它不能正常工作.所以这里是解决方案,给它一个data-container集合,body你也可以摆脱一个元素,然后直接将它添加到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>