Bootstrap popover on svg

bootstrap popover container
bootstrap popover template
bootstrap popover dynamic content
bootstrap popover width
bootstrap popover example div content
bootstrap popover'' data-content not showing
svg tooltip
bootstrap popover close button

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.

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>

Why doesn't Twitter Bootstrap popover work with SVG elements , From that example it looks like you need to modify Bootstrap to get this to work. Under bootstrap-tooltip.js replace: $tip .detach() .css({ top: 0,  I am using ng-bootstrap and I want to add a popover or tooltip over a svg elemet. I need this popover to contain a button and some texts. What I have tried is this: &lt;ng-template #popContent&gt;

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

Twitter Bootstrap Tooltips playing nice with SVG, First, read about Bootstrap tooltips and popovers on Bootstrap's website. Want to add a tooltip to an svg object? Check out this question on  I'm developing a web application using Angular 5 with Ngx-Bootstrap and I'm having a trouble in the template inside a SVG tag. I'm doing a loop in a svg group (g tag). Inside G I have some foreignObjects and I want to use bootstrap popover for each foreignObject when mouse is on it, but I need make binding inside the popovers, and template

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

Bootstrap JS Popover Reference, Plugin dependency: Popovers require the tooltip plugin (tooltip.js) to be included in your version of Bootstrap. For a tutorial about Popovers, read our Bootstrap  The popover should be centred over the svg rectangle.

Try put this inside your script tag

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

Quick override of Bootstrap popover to support SVG circles (which , override of Bootstrap popover to support SVG circles (which don't have a valid offsetWidth/offsetHeight in Safari 5.1.7 OS X). user-bootstrap-circle-popover.js. First, read about Bootstrap tooltips and popovers on Bootstrap's website. Want to add a tooltip to an svg object? Check out this question on Stack Overflow: How do I show a bootstrap tooltip with an svg object. Or, just jump right on ahead to the jsfiddle. The essence of it boils down to using $('svg…

Tooltips on SVG using Bootstrap+Jquery, Quick proof of concept for a project: Styling inline SVGs with CSS and using tooltips Manually edited the SVG for proper ID's for each region The Popover plugin is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content. Tip: Plugins can be included individually (using Bootstrap's individual "popover.js" file), or all at once (using "bootstrap.js" or "bootstrap.min.js").

Popovers, bound to SVG elements, View Compiled HTML; Analyze HTML; Maximize HTML Editor; Minimize HTML Editor; Fold All; Unfold All. 3. 1. <svg id="svg"></svg>. 2. <div id="log"></div>. 3. The popover requires including the tooltip.js plug-in. If you have included bootstrap.js or bootstrap.min.js then you do not need including the other plug-in separately. One other requirement in Bootstrap 4 popovers is including the popper.js (or popper.min.js) before the reference of Bootstrap JS file. It is required for positioning of popovers.

Adding tooltips to SVG graphics – Journocode, In this tutorial, we'll show you a way to add tooltips to your SVG graphics. to an SVG element it will get a tooltipster-punk themed tooltip with  JS Popover (popover.js) The Popover plugin is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content.

Comments
  • The problem is I want to have multiple different svg shapes to have different popovers. And I need all of the shapes to be inside one svg element.
  • CyberBurst I have updated my answer, and it works now. It will allow you to set it for each shape to have its own popover :)
  • While this does work, I really want the data-toggle="popover" and so on, to be on my circle element. And when I add it to the circle it still does not work.
  • Try this. When you call popover give container as body.
  • $('[data-toggle="popover"]').popover({container:'body'});