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

我找到了解决方案。制作popover时，bootstrap会在父容器中生成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

将data-toggle =“popover”title =“Popover Header”data-content =“popover中的一些内容”移至SVG.It将有效。

Answer 3

从上面接受的答案来看，我不清楚，但您可以在data-container=""中放入任何元素。例如，如果您的SVG位于某个<div class="svg-container></div>内，则可以将此类作为“数据容器”的值，如下所示： data-container=".svg-container"。这比将data-container="body"设置为值要好，因为在这种情况下，所有弹出窗口都将位于正文的最底部，并且出现某些不必要的/意外的行为（例如，调整页面大小时）。

Answer 4

尝试将其放入脚本标记

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

在svg上的Bootstrap popover

4 个答案: