在SVG上使用Bootstrap弹出框

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时，如何使弹出框出现？

任何帮助都将不胜感激。

- HoltH

Answer 1

我找到了解决方案。在创建一个弹出框时，Bootstrap会在父容器中生成一个div元素。显然，当它在SVG中时，这样做是不正确的。所以这里是解决方案，给它一个 data-container 设置为 body。你还可以摆脱a元素，直接将其添加到圆形元素中。

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

- eleanor

---

问题是我想要有多个不同的SVG形状来显示不同的弹出框。而且我需要所有的形状都在一个SVG元素内。 - HoltH

CyberBurst，我已经更新了我的答案，现在它可以正常工作了。它将允许您为每个形状设置自己的弹出窗口 :) - laken

如果有人正在尝试使用Bootstrap 5来完成这项任务，请记得将属性名称更改为"data-bs-"，而不仅仅是"data-。" - healthybodhi

只是以防有人试图在Bootstrap 5中这样做，请记得将属性名称更改为"data-bs-"而不仅仅是"data-" - undefined

Answer 2

从上面接受的答案中，我并不清楚，但是你可以将任何元素放在data-container=""中。例如，如果你的SVG位于某个<div class="svg-container"></div>内部，你可以将这个类作为"data-container"的值，像这样：data-container=".svg-container"。这比将data-container="body"作为值更好，因为在这种情况下，所有的弹出框都会出现在页面底部，并带来一些不必要/意外的行为（例如，当页面被调整大小时）。

- Maria Blair

Answer 3

将 data-toggle="popover" title="Popover Header" data-content="Some content inside the popover" 移动到 SVG 中。它会起作用。

- user3407386

---

虽然这样做可以起作用，但我真的希望data-toggle="popover"等内容出现在我的圆形元素上。当我将其添加到圆形上时，它仍然无法正常工作。 - HoltH

尝试这个。当您调用弹出窗口时，请将容器设置为body。 - user3407386

$('[data-toggle="popover"]').popover({container:'body'}); - user3407386

Answer 4

尝试将这个放在你的脚本标签中

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

- Yuri Pereira

Answer 5

2022年+ Bootstrap 5+

<a class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="click hover" 
title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">
   <svg ....
   </svg>
</a>

class="d-inline-block" 解决了这个问题！

- imbr