Popover

The floating card popped by clicking or hovering.

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.

import { NzPopoverModule } from 'ng-zorro-antd/popover';

Examples

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

expand codeexpand code
      Loading...
    

Use nzPopoverVisible prop to control the display of the card.

expand codeexpand code
      Loading...
    

nzPopoverContent and nzPopoverTitle accept the type of TemplateRef<void>

expand codeexpand code
      Loading...
    

There are 12 placement options available.

expand codeexpand code
      Loading...
    

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

expand codeexpand code
      Loading...
    

Mouse to click, focus and move in.

expand codeexpand code
      Loading...
    

API#

[nz-popover]#

ParamDescriptionTypeDefault value
[nzPopoverArrowPointAtCenter]Arrow point at center of the originbooleanfalse
[nzPopoverTitle]Title of the popoverstring | TemplateRef<void>-
[nzPopoverContent]Content of the popoverstring | TemplateRef<void>-
[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-

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.