更新

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放在外面它也不起作用。

我在angular-cli.json中添加了jQuery和tooltipster的.js和.css文件。我还提供了他们为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文件。我现在遇到的另一个问题是我无法动态地添加工具提示，因为我在index.html中的标签内部有我的工具提示码，我无法让它在角度组件中工作，因为我无法弄清楚如何使jQuery和Tooltipster工作那里。

Answer 1

它认为这个工具提示应该在svg组件中，显示变量将被驱动隐藏或显示它，在角度内，该按钮将被称为分配（单击）功能到svg rect按钮。示例

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

svg元素

更新

1 个答案: