pad*_*adr 4 svg popover ng-bootstrap
我正在使用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 内，而浏览器无法以这种方式呈现它。是否有一些可能的解决方法，我可以通过某种方式显示这些弹出窗口？
谢谢。
您可以使用API 文档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 以获取完整的示例。
| 归档时间： |
|
| 查看次数： |
1994 次 |
| 最近记录： |