Popover

The floating card popped by clicking or hovering.
Import

When To Use#

A simple popup menu to provide extra information or operations.

Comparing with Tooltip, besides information Popover card can also provide action elements like links and buttons.

Examples

The most basic example. The size of the floating layer depends on the contents region.

      Loading...
    

Use nzPopoverVisible prop to control the display of the card.

      Loading...
    

nzPopoverContent and nzPopoverTitle accept the type of TemplateRef<void>

      Loading...
    

Set nzPopoverOverlayClickable to be false to disable closing popover by clicking the mask when nzPopoverTrigger is 'click'.

      Loading...
    

There are 12 placement options available.

      Loading...
    

By specifying nzPopoverPlacement prop, the arrow can be point to the center of the target element.

      Loading...
    

Mouse to click, focus and move in.

      Loading...
    

API#

[nz-popover]#

ParamDescriptionTypeDefault value
[nzPopoverArrowPointAtCenter]Arrow point at center of the originbooleanfalse
[nzPopoverTitle]Title of the popoverstring | TemplateRef<void>-
[nzPopoverTitleContext]The context of Titleobject-
[nzPopoverContent]Content of the popoverstring | TemplateRef<void>-
[nzPopoverContentContext]The context of Contentobject-
[nzPopoverTrigger]Popover trigger mode. If set to null it would not be triggered'click' | 'focus' | 'hover' | null'hover'
[nzPopoverPlacement]The position of the popover relative to the target'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom' | Array<string>'top'
[nzPopoverOrigin]Origin of the tooltipElementRef-
[nzPopoverVisible]Show or hide popoverbooleanfalse
(nzPopoverVisibleChange)Callback of hide or showEventEmitter<boolean>-
[nzPopoverMouseEnterDelay]Delay in seconds, before popover is shown on mouse enternumber0.15
[nzPopoverMouseLeaveDelay]Delay in seconds, before popover is hidden on mouse leavenumber0.1
[nzPopoverOverlayClassName]Class name of the popover cardstring-
[nzPopoverOverlayStyle]Style of the popover cardobject-
[nzPopoverOverlayClickable]Click the mask to close the bubble box. Only the click trigger behavior is validbooleantrue

Consult Tooltip's documentation to find more APIs. | [nzPopoverBackdrop] | whether or not the overlay should attach a backdrop | boolean | false |

Note#

Please ensure that the node of [nz-popover] accepts onMouseEnter, onMouseLeave, onFocus, onClick events.