【问题标题】：Angular 2 tooltip plugin on svg elementssvg元素上的Angular 2工具提示插件
【发布时间】：2017-08-05 13:11:42
【问题描述】：

我想在我的 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 文件。现在我遇到的另一个问题是我无法直接添加工具提示，因为我的 tooltipster 代码在 index.html 的标签内，我无法让它在 angular 组件中工作，因为我无法弄清楚如何让 jQuery 和 Tooltipster 工作在那里。

【问题讨论】：

你能帮我在 Angular4 中运行同样的东西吗？我很难让工具提示器在 Angular 4 中运行
我不完全记得是什么问题，但我在 SVG 上使用 tooltipster 有多个问题，然后我切换到 ng bootstrap popovers，我可以根据需要很好地格式化。希望这会有所帮助：ng-bootstrap.github.io/#/components/popover/examples
ngpopover 不错，但缺少类似于 tooltipster 的动画部分。有什么想法吗？
好吧，当我找到弹出框时，我已经在创建自己的了。很快就可以根据您的需求专门创建一个。
感谢您的意见。我设法将 tooltipstr 添加到 angular :)

标签： angular svg tooltip tooltipster

【解决方案1】：

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

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

【讨论】：