从浮层内关闭

三种触发方式

禁止通过蒙层关闭面板

Popover 气泡卡片

点击/鼠标移入元素，弹出气泡式的卡片浮层。

使用

源码

components/popover

文档

何时使用#

当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。

和 Tooltip 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。

代码演示#

API#

参数	说明	类型	默认值
`[nzPopoverArrowPointAtCenter]`	箭头指向锚点的中心	`boolean`	`false`
`[nzPopoverTitle]`	标题	`string \| TemplateRef<void>`	-
`[nzPopoverTitleContext]`	标题的上下文	`object`	-
`[nzPopoverContent]`	用于定义内容	`string \| TemplateRef<void>`	-
`[nzPopoverContentContext]`	内容的上下文	`object`	-
`[nzPopoverTrigger]`	触发行为，为 `null` 时不响应光标事件	`'click' \| 'focus' \| 'hover' \| null`	`'hover'`
`[nzPopoverPlacement]`	气泡框位置	`'top' \| 'left' \| 'right' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom' \| Array<string>`	`'top'`
`[nzPopoverOrigin]`	气泡框定位元素	`ElementRef`	-
`[nzPopoverVisible]`	显示隐藏气泡框	`boolean`	`false`
`(nzPopoverVisibleChange)`	显示隐藏的事件	`EventEmitter<boolean>`	-
`[nzPopoverMouseEnterDelay]`	鼠标移入后延时多少才显示气泡框，单位：秒	`number`	`0.15`
`[nzPopoverMouseLeaveDelay]`	鼠标移出后延时多少才隐藏气泡框，单位：秒	`number`	`0.1`
`[nzPopoverOverlayClassName]`	卡片类名	`string`	-
`[nzPopoverOverlayStyle]`	卡片样式	`object`	-
`[nzPopoverBackdrop]`	浮层是否应带有背景板	`boolean`	`false`
`[nzPopoverOverlayClickable]`	点击蒙层关闭气泡框，仅`click`触发行为有效	`boolean`	`true`

更多属性请参考 Tooltip。

注意#

请确保 [nz-popover] 元素能接受 onMouseEnter、onMouseLeave、onFocus、onClick 事件。

FAQ#

Q：滚动时浮层元素没有跟随滚动位置#

默认情况下，浮层元素使用 body 作为滚动容器，如果使用了其他滚动容器，在自定义滚动容器元素上添加 CdkScrollable 指令。注意：您需要从 @angular/cdk/scrolling 导入 CdkScrollable 指令或 ScrollingModule 模块。