javascript – svg上的Bootstrap popover

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

任何帮助将不胜感激.

解决方法

我找到了解决方案.制作popover时,bootstrap会在父容器中生成div元素.显然,当它在svg内部时,它不能正常工作.所以这里是解决方案,给它一个数据容器设置为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>

原文地址：https://www.jb51.cc/js/150430.html