CyberBurst CyberBurst - 14 days ago 9
CSS Question

Bootstrap popover on svg

According to http://www.w3schools.com/bootstrap/bootstrap_ref_js_popover.asp, 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

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