Angular 2 个 svg 元素的工具提示插件

Question

我想在我的 angular 2 项目中的 <svg:circle> 元素上放置一个工具提示。我需要此工具提示与一些文本和按钮进行交互。因此我想为此使用 tooltipster (http://iamceege.github.io/tooltipster/)。我一直在无缝地使用它，直到我决定将我的项目重写为 angular 2.

现在我不能让它正常工作。我得到的是一个圆圈：

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

还有一个带有工具提示内容的 span：

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

这两个都在 <svg:g> 元素中，但是如果我把 svg 放在外面它也不起作用。

我已将 jQuery 和 tooltipster 的 .js 和 .css 文件包含在我的 angular-cli.json 中。我还包含了他们为 SVG 推荐的 tooltipster-SVG.min.js 文件。接下来，我的页面底部有一个小脚本，它调用 $(".tooltips").tooltipster(options); 它似乎是这样工作的，但我遇到的问题是它呈现在我网站的底部，此外，有时我会得到这个当我将鼠标悬停在他的圆上时出错：

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

我将不胜感激任何帮助，甚至建议使用其他插件（我发现的唯一插件是 https://www.npmjs.com/package/ngx-popover，但我不知道它是否支持 svg 元素）或其他方式。我需要尽快完成这个项目，所以感谢您的帮助。

更新

它现在可以与工具提示一起使用。我发现它需要包含另一个 .css 文件。现在我遇到的另一个问题是我无法以 dznamically 添加工具提示，因为我的工具提示代码位于 index.html 的标记内，我无法使其在 angular 组件内工作，因为我无法弄清楚如何让 jQuery 和 Tooltipster 在那里工作。

Answer 1

它认为这个工具提示应该在 svg 组件中，显示变量将被驱动来隐藏或显示它，在 angular 内，该按钮将调用分配（单击）功能到 svg 矩形按钮。例子

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

Angular 2 个 svg 元素的工具提示插件

Angular 2 tooltip plugin on svg elements

svg

tooltip

tooltipster

angular

更新