Popover

The floating card popped by clicking or hovering.
Import
Source components/popover
Docs Edit this page

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#

Basic

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

      Loading...
Controlling the close of the dialog

Use nzPopoverVisible prop to control the display of the card.

      Loading...
Template

nzPopoverContent and nzPopoverTitle accept the type of TemplateRef<void>

      Loading...
Disable closing popover through mask

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

      Loading...
Placement

There are 12 placement options available.

      Loading...
Arrow pointing at the center

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

      Loading...
Three ways to trigger

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.

FAQ#

Q: The overlay layer element does not follow the scroll position when scrolling#

By default, the overlay layer element uses body as the scroll container. If using another scroll container, add the CdkScrollable directive to the custom scroll container element. Note: You need to import the CdkScrollable directive or ScrollingModule module from @angular/cdk/scrolling.