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