I would like to put a tooltip onto an <svg:circle> element in my angular 2 project. I need this tooltip to be interactive with some text and a button. Therefore I want to use tooltipster (http://iamceege.github.io/tooltipster/) for this. I was using it seamlessly until I decided to rewrite my project into angular 2.

Now I cant make it work properly. What I have got is a circle:

<circle class="seat tooltips tooltipstered" r="4" style="fill: rgb(206, 206, 206);" id="0" data-tooltip-content="#tooltip_content-0" cx="10" cy="10"></circle>

And a span with a tooltip content:

<span [id]="'tooltip_content-'+seat.id">
        <strong>Seat ID:</strong> <span [class]="tooltip-id">{{seat.id}}</span><br>
        <strong *ngIf="reservation != null">User: </strong> <span *ngIf="reservation != null" class="tooltip-name">{{reservation.user}}</span><br>
        <button *ngIf="reservation != null" class="btn btn-small btnTooltipBook">Book</button>
    </span>

Both of these are in a <svg:g> element, but it isnt working also if I put the outside my svg.

I have included jQuery and tooltipster's .js and .css filen in my angular-cli.json. I also included tooltipster-SVG.min.js file that they recommend for SVG's. Next I have a small script in the bottom of my page that calls $(".tooltips").tooltipster(options); It seems to be working this way, but the problem I am having is that it renders on the bottom of my site and furthermore, sometimes I get this error when I hover over he circle:

Uncaught TypeError: Cannot read property 'svgjs' of undefined    zone.js:195

I would appreciate any help with this, even suggestions of using other plugins (the only one I found was https://www.npmjs.com/package/ngx-popover but I cant figure out whether it supports with svg elements) or other ways of doing it. I need to finish this project soon so thanks for any help.

Update

It works now with tooltipster. I figured out that it needed to include another .css file. Now another problem I am having is that I can not add tooltips dznamically as I have my tooltipster code inside a tag in the index.html and I cant make it work inside angular components as I cant figure out how to make both jQuery and Tooltipster work there.

it think this tooltip should be in the svg component , display variable will be driven to hide or show it , within angular, the button will be called assigning (click) function to svg rect button. example

<g id="mytooltip" [attr.display]="drivingtooltipvar">
<text ... (click)="click($event) />{{tiptext}}</text>
</g>