ng-bootstrap popover over svg元素

我正在使用ng-bootstrap，我想在svg元素上添加彈出窗口或工具提示。我需要這個彈出框來包含一個按鈕和一些文本。ng-bootstrap popover over svg元素

我曾嘗試是這樣的：

<ng-template #popContent>Book this seat <button>Book</button></ng-template> 

<svg:circle [attr.id]="seat.id" class="seat tooltips" [attr.cx]="seat.x" [attr.cy]="seat.y" r="4" style="fill: rgb(206, 206, 206);" [ngbPopover]="popContent"></svg:circle>

我也有導入庫：

import { PopoverModule } from "../../../../node_modules/ngx-popover";

而且我正在引導4.0.0-alpha.6。

它沒有顯示出來，因爲生成的彈出窗口被放置在svg中，瀏覽器無法以這種方式渲染它。有沒有可能的解決方法，我可以通過某種方式顯示這些彈出窗口？

謝謝。

來源

2017-08-07 padr

如API documentation描述可以使用container選項：

選擇器指定酥料餅應該附加到該元件。目前只支持「body」。

通過使用container="body"你可以添加爲<body>元素的子元素（而不是作爲SVG的圈子元素的兄弟姐妹）一酥料餅的窗口：

<ng-template #popContent>Book this seat <button>Book</button></ng-template> 

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> 
    <svg:circle [attr.id]="seat.id" [attr.cx]="seat.x" [attr.cy]="seat.y" r="4" style="fill: rgb(206, 0, 0);" [ngbPopover]="popContent" container="body"></svg:circle> 
</svg>

下面是一個工作plunker展示這種：http://plnkr.co/edit/lVYsY3LDVX9WGZhbMBMu?p=preview

也請注意，適當進口是import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; - 檢查鏈接plunker爲完整的例子。

來源

2017-08-07 08:33:03

對不起，我回答了我的問題，並沒有刷新看到你也同時回答，謝謝你的解決方案和工作演示。我現在有另一個問題，我想彈出鼠標懸停在圓上打開，我想在鼠標離開popover（不是圓圈）後關閉它，因爲我希望它是交互式的。 'triggers =「mouseenter：mouseleave」'不能像這樣工作，它會在鼠標離開圓圈後立即關閉。我開始實施複雜的手動觸發器，但有沒有更簡單的方法？ – padr

@padr「手動」觸發器是IMO的案例。我不認爲這是複雜的實施，請參閱：http://plnkr.co/edit/9FbFjkLf4XeicvSA8YdZ?p=preview –

我不能讓它工作正常。我需要一些延遲。當我離開圓圈但不碰觸彈出窗口時，我不希望彈出窗口顯示。但是，如果我想要的話，我還想有足夠的時間從圈子移動到彈出窗口。 – padr

我做了工作：

有一個叫容器中指定的酥料餅附加的地方的選項。

container="body"

當前只支持「body」。

來源

2017-08-07 08:29:51 padr

ng-bootstrap popover over svg元素

回答

相關問題