引导酥料饼

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

我想出的解决方案内。在制作弹出窗口时，引导程序会在父容器内生成一个div元素。很明显，当它在svg里面的时候，这是行不通的。所以这里是解决方案，给它一个data-container设置为body你也可以摆脱一个元素，并直接将其添加到圆形元素。

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

Answer 2

将数据切换=“弹出窗口”title =“弹出窗口标题”data-content =“弹出窗口中的一些内容”到SVG.It将起作用。

Answer 3

尽量把这个脚本标签

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