'Bootstrap popover on svg

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.

javascripthtmlcsstwitter-bootstrapsvg


Solution 1:[1]

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

Solution 2:[2]

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

Solution 3:[3]

Try put this inside your script tag 

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

Solution 4:[4]

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!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 user3407386
Solution 2 Maria Blair
Solution 3 Yuri Ramos
Solution 4 iambr

Related Questions