CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapsvg
HoltH
HoltH

Reputation: 193

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.

Upvotes: 7

Views: 10353

Answers (5)

imbr
imbr

Reputation: 7632

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!

Upvotes: 0

Maria Blair
Maria Blair

Reputation: 319

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

Upvotes: 1

laken
laken

Reputation: 328

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>

Upvotes: 12

Yuri Pereira
Yuri Pereira

Reputation: 1995

Try put this inside your script tag 

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

Upvotes: 0

user3407386
user3407386

Reputation: 172

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

Upvotes: 1

Related Questions