我想在我的angular 2项目中将工具提示放到<svg:circle>元素上。我需要这个工具提示与一些文本和按钮交互。因此，我想使用tooltipster（http://iamceege.github.io/tooltipster/）。我正在无缝地使用它，直到我决定将我的项目重写为角度2.svg元素上的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元素支持），或做其他的方法它。我需要尽快完成这个项目，谢谢你的帮助。

更新

它现在适用于tooltipster。我发现它需要包含另一个.css文件。现在我遇到的另一个问题是，我无法添加工具提示，因为我有我的tooltipster代码在index.html中的标记内，我不能使它在角度组件内工作，因为我无法弄清楚如何使jQuery和Tooltipster工作那里。

来源

2017-08-05 padr

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

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

来源

2017-08-06 22:30:19 sancelot

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

更新

回答

相关问题