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 this Component Individually#

You can get more detail here.

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
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-popover-basic',
  template: `
    <button nz-button nz-popover nzType="primary" nzPopoverTitle="Title" nzPopoverContent="Content">
      Hover me
    </button>
  `
})
export class NzDemoPopoverBasicComponent {}

Use nzVisible prop to control the display of the card.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-popover-control',
  template: `
    <button
      nz-button
      nzType="primary"
      nz-popover
      nzPopoverTitle="Title"
      [(nzVisible)]="visible"
      (nzVisibleChange)="change($event)"
      nzPopoverTrigger="click"
      [nzPopoverContent]="contentTemplate"
    >
      Click me
    </button>
    <ng-template #contentTemplate>
      <a (click)="clickMe()">Close</a>
    </ng-template>
  `
})
export class NzDemoPopoverControlComponent {
  visible: boolean;

  clickMe(): void {
    this.visible = false;
  }

  change(value: boolean): void {
    console.log(value);
  }
}

nzPopoverContent and nzPopoverTitle accept the type of TemplateRef<void>

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-popover-template',
  template: `
    <button nz-button nz-popover [nzPopoverTitle]="titleTemplate" [nzPopoverContent]="contentTemplate">
      Render Template
    </button>
    <ng-template #titleTemplate><i nz-icon nzType="close"></i> Title</ng-template>
    <ng-template #contentTemplate><i nz-icon nzType="check"></i> Content</ng-template>
  `
})
export class NzDemoPopoverTemplateComponent {}

There are 12 placement options available.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-popover-placement',
  template: `
    <div style="margin-left: 60px">
      <button
        nz-button
        nz-popover
        nzPopoverTitle="Title"
        [nzPopoverContent]="contentTemplate"
        nzPopoverPlacement="topLeft"
      >
        TL
      </button>
      <button nz-button nz-popover nzPopoverTitle="Title" [nzPopoverContent]="contentTemplate" nzPopoverPlacement="top">
        Top
      </button>
      <button
        nz-button
        nz-popover
        nzPopoverTitle="Title"
        [nzPopoverContent]="contentTemplate"
        nzPopoverPlacement="topRight"
      >
        TR
      </button>
    </div>
    <div style="width: 60px; float: left;">
      <button
        nz-button
        nz-popover
        nzPopoverTitle="Title"
        [nzPopoverContent]="contentTemplate"
        nzPopoverPlacement="leftTop"
      >
        LT
      </button>
      <button
        nz-button
        nz-popover
        nzPopoverTitle="Title"
        [nzPopoverContent]="contentTemplate"
        nzPopoverPlacement="left"
      >
        Left
      </button>
      <button
        nz-button
        nz-popover
        nzPopoverTitle="Title"
        [nzPopoverContent]="contentTemplate"
        nzPopoverPlacement="leftBottom"
      >
        LB
      </button>
    </div>
    <div style="width: 60px; margin-left: 252px;">
      <button
        nz-button
        nz-popover
        nzPopoverTitle="Title"
        [nzPopoverContent]="contentTemplate"
        nzPopoverPlacement="rightTop"
      >
        RT
      </button>
      <button
        nz-button
        nz-popover
        nzPopoverTitle="Title"
        [nzPopoverContent]="contentTemplate"
        nzPopoverPlacement="right"
      >
        Right
      </button>
      <button
        nz-button
        nz-popover
        nzPopoverTitle="Title"
        [nzPopoverContent]="contentTemplate"
        nzPopoverPlacement="rightBottom"
      >
        RB
      </button>
    </div>
    <div style="margin-left: 60px; clear: both;">
      <button
        nz-button
        nz-popover
        nzPopoverTitle="Title"
        [nzPopoverContent]="contentTemplate"
        nzPopoverPlacement="bottomLeft"
      >
        BL
      </button>
      <button
        nz-button
        nz-popover
        nzPopoverTitle="Title"
        [nzPopoverContent]="contentTemplate"
        nzPopoverPlacement="bottom"
      >
        Bottom
      </button>
      <button
        nz-button
        nz-popover
        nzPopoverTitle="Title"
        [nzPopoverContent]="contentTemplate"
        nzPopoverPlacement="bottomRight"
      >
        BR
      </button>
    </div>
    <ng-template #contentTemplate>
      <div>
        <p>Content</p>
        <p>Content</p>
      </div>
    </ng-template>
  `,
  styles: [
    `
      button {
        margin-right: 8px;
        margin-bottom: 8px;
        width: 70px;
        text-align: center;
        padding: 0;
      }
    `
  ]
})
export class NzDemoPopoverPlacementComponent {}

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-popover-arrow-point-at-center',
  template: `
    <button nz-button nzPopoverTitle="Title" nzPopoverContent="Content" nzPopoverPlacement="topLeft" nz-popover>
      Align edge / 边缘对齐
    </button>
    <button nz-button nzPopoverTitle="Title" nzPopoverContent="Content" nzPopoverPlacement="topCenter" nz-popover>
      Arrow points to center / 箭头指向中心
    </button>
  `,
  styles: [
    `
      button {
        margin-right: 8px;
        margin-bottom: 8px;
      }
    `
  ]
})
export class NzDemoPopoverArrowPointAtCenterComponent {}

Mouse to click, focus and move in.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-popover-triggerType',
  template: `
    <ng-template #contentTemplate>
      <div>
        <p>Content</p>
        <p>Content</p>
      </div>
    </ng-template>
    <button nz-button nz-popover nzPopoverTitle="Title" [nzPopoverContent]="contentTemplate" nzPopoverTrigger="click">
      Click me
    </button>
    <button nz-button nz-popover nzPopoverTitle="Title" [nzPopoverContent]="contentTemplate" nzPopoverTrigger="hover">
      Hover me
    </button>
    <button nz-button nz-popover nzPopoverTitle="Title" [nzPopoverContent]="contentTemplate" nzPopoverTrigger="focus">
      Focus me
    </button>
  `,
  styles: [
    `
      button {
        margin-right: 8px;
      }
    `
  ]
})
export class NzDemoPopoverTriggerTypeComponent {}

API#

[nz-popover]#

ParamDescriptionTypeDefault value
[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''top'

From version 8.2.0, API without prefix above, e.g nzTitle is deprecated, please upgrade as soon as possible.

Consult Tooltip's documentation to find more APIs.

Note#

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