我想在我的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工具提示插件

更新

回答

相關問題