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:
<ng-template #popContent>Book this seat <button>Book</button></ng-template>
<svg:circle [attr.id]="seat.id" class="seat tooltips" [attr.cx]="seat.x" [attr.cy]="seat.y" r="4" style="fill: rgb(206, 206, 206);" [ngbPopover]="popContent"></svg:circle>
I also have the library imported:
import { PopoverModule } from "../../../../node_modules/ngx-popover";
And I am running bootstrap 4.0.0-alpha.6.
It does not show up, because the generated popover is being placed inside the svg and the browser can not render it that way. Is there some possible workaround, some way I could show these popovers?
Thank you.
You can use the container option as described in the API documentation:
A selector specifying the element the popover should be appended to. Currently only supports "body".
By using container="body" you can have a popover window added as a child of the <body> element (instead of being a sibling of the SVG's circle element):
<ng-template #popContent>Book this seat <button>Book</button></ng-template>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<svg:circle [attr.id]="seat.id" [attr.cx]="seat.x" [attr.cy]="seat.y" r="4" style="fill: rgb(206, 0, 0);" [ngbPopover]="popContent" container="body"></svg:circle>
</svg>
Here is a working plunker demonstrating this: http://plnkr.co/edit/lVYsY3LDVX9WGZhbMBMu?p=preview
Please also note that the proper import is import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; - check the linked plunker for the complete example.