According to w3schools, in order to make a popover appear next to a link, all I need to use is this HTML:

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

My question is this: How would I make a popover appear when I click on an svg element? I tried this:

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

Basically, all I did was stick an svg shape in the link, but it does not work.
How do I make a popover appear when I click on an svg?

Any help would be greatly appreciated.

According to w3schools.com, in order to make a popover appear next to a link, all I need to use is this HTML:

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

My question is this: How would I make a popover appear when I click on an svg element? I tried this:

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

Basically, all I did was stick an svg shape in the link, but it does not work.
How do I make a popover appear when I click on an svg?

Any help would be greatly appreciated.

• javascript
• html
• css
• twitter-bootstrap
• svg

5 Answers 5

I figured out the solution. When making a popover, bootstrap generates a div element inside the parent container. Obviously, that doesn't work right when its inside a svg. So here is the solution, give it a data-container set as body You can also get rid of the a element, and just add it directly to the circle element.

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

Move data-toggle="popover" title="Popover Header" data-content="Some content inside the popover" to SVG.It will work.

It wasn't clear to me from the accepted answer above, but you can put any element in the data-container="". For example, if your SVG lives inside some <div class="svg-container></div>, you can put this class as the value for the 'data-container', like this: data-container=".svg-container". This is better than put data-container="body" as a value because in that case all the popovers will be in the very bottom of the body with some unwanted/unexpected behavior (e.g. when page is resized).

Try put this inside your script tag

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

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" solves the problem!