Popover 气泡卡片

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

何时使用#

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

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

代码演示

最简单的用法。

鼠标移入、聚集、点击。

位置有十二个方向

使用nzVisible属性控制浮层显示

API

nz-popover

参数 说明 类型 默认值
nzPlacement 气泡框位置,可选 topleftrightbottomtopLefttopRight
bottomLeftbottomRightleftTopleftBottomrightToprightBottom
String top
nzTemplate 用于定义Content内容 ng-template
nzVisible 用于手动控制浮层显隐 双向绑定 Boolean false
nzVisibleChange 显示隐藏的回调 EventEmitter
nzTrigger 触发行为,可选 hover/focus/click String hover
nzOverlayClassName 卡片类名 String
nzOverlayStyle 卡片样式 object