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.