of-bootstrap 在 svg 元素上弹出

Question

我正在使用 ng-bootstrap，我想在 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";

我是运行 bootstrap 4.0.0-alpha.6.

它没有显示出来，因为生成的弹出窗口被放置在 svg 中，浏览器无法那样呈现它。是否有一些可能的解决方法，可以通过某种方式显示这些弹出窗口？

谢谢。

Answer 1

我成功了：

有一个名为 container 的选项，它指定弹出框的附加位置。

container="body"

目前仅支持"body"。

Answer 2

您可以使用 container 选项，如 API documentation:

中所述

A selector specifying the element the popover should be appended to. Currently only supports "body".

通过使用 container="body"，您可以将弹出窗口 window 添加为 <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 以获取完整示例。

of-bootstrap 在 svg 元素上弹出

ng-bootstrap popover over svg element

svg

popover

ng-bootstrap