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.

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" nzTitle="Title" nzContent="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
      nzTitle="Title"
      [(nzVisible)]="visible"
      (nzVisibleChange)="change($event)"
      nzTrigger="click"
      [nzContent]="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);
  }
}

nzContent and nzTitle 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 [nzTitle]="titleTemplate" [nzContent]="contentTemplate">
      Render Template
    </button>
    <ng-template #titleTemplate><i nz-icon type="close"></i> Title</ng-template>
    <ng-template #contentTemplate><i nz-icon type="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 nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="topLeft">TL</button>
      <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="top">Top</button>
      <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="topRight">TR</button>
    </div>
    <div style="width: 60px; float: left;">
      <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="leftTop">LT</button>
      <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="left">Left</button>
      <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="leftBottom">LB</button>
    </div>
    <div style="width: 60px; margin-left: 252px;">
      <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="rightTop">RT</button>
      <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="right">Right</button>
      <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="rightBottom">RB</button>
    </div>
    <div style="margin-left: 60px; clear: both;">
      <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="bottomLeft">BL</button>
      <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="bottom">Bottom</button>
      <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="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 nzPlacement 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 nzTitle="Title" nzContent="Content" nzPlacement="topLeft" nz-popover>
      Align edge / 边缘对齐
    </button>
    <button nz-button nzTitle="Title" nzContent="Content" nzPlacement="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 nzTitle="Title" [nzContent]="contentTemplate" nzTrigger="click">Click me</button>
    <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzTrigger="hover">Hover me</button>
    <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzTrigger="focus">Focus me</button>
  `,
  styles: [
    `
      button {
        margin-right: 8px;
      }
    `
  ]
})
export class NzDemoPopoverTriggerTypeComponent {}

API#

Import this Component Individually#

You can get more detail here.

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

[nz-popover]#

ParamDescriptionTypeDefault value
nzTitleTitle of the cardstring|TemplateRef<void>-
nzTemplateUsed to define the contentstring|TemplateRef<void>-

Consult Tooltip's documentation to find more APIs.

Note#

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