根据
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>
