Download poll on svg

Question

According to w3schools.com , to make a popover next to the link, all I need to use is HTML:

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

My question is this: how can I make a popover when I click on the 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, everything I did was tied to the svg form in the link, but this does not work.
How to create a popover when I click on svg?

Any help would be greatly appreciated.

Answer 1

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

Answer 2

data-toggle = "popover" title= "Popover Header" data-content = " popover" SVG.It .

Answer 3

Try putting this in your script tag

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