Bootstrap popover on svg

Question

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.

Answer 1

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>

Answer 2

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

Answer 3

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