Tooltip

A simple text popup tip.

When To Use#

  • The tip is shown on mouse enter, and is hidden on mouse leave. The Tooltip doesn't support complex text or operations.
  • To provide an explanation of a button/text/operation. It's often used instead of the html title attribute.

Import this Component Individually#

You can get more detail here.

import { NzToolTipModule } from 'ng-zorro-antd/tooltip';

Examples

Tooltip will show when mouse enter.

The simplest usage.

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

@Component({
  selector: 'nz-demo-tooltip-basic',
  template: `
    <span nz-tooltip nzTooltipTitle="prompt text">Tooltip will show when mouse enter.</span>
  `
})
export class NzDemoTooltipBasicComponent {}

By specifying nzTooltipPlacement 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-tooltip-arrow-point-at-center',
  template: `
    <button nz-button nzTooltipTitle="prompt text" nzTooltipPlacement="topLeft" nz-tooltip>
      Align edge / 边缘对齐
    </button>
    <button nz-button nzTooltipTitle="prompt text" nzTooltipPlacement="topCenter" nz-tooltip>
      Arrow points to center / 箭头指向中心
    </button>
  `,
  styles: [
    `
      button {
        margin-right: 8px;
        margin-bottom: 8px;
      }
    `
  ]
})
export class NzDemoTooltipArrowPointAtCenterComponent {}

The ToolTip has 12 placements choice.

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

@Component({
  selector: 'nz-demo-tooltip-placement',
  template: `
    <div style="margin-left:60px;">
      <button nzTooltipTitle="prompt text" nzTooltipPlacement="topLeft" nz-button nz-tooltip>TL</button>
      <button nzTooltipTitle="prompt text" nzTooltipPlacement="top" nz-button nz-tooltip>Top</button>
      <button nzTooltipTitle="prompt text" nzTooltipPlacement="topRight" nz-button nz-tooltip>TR</button>
    </div>
    <div style="float:left;width: 60px;">
      <button nzTooltipTitle="prompt text" nzTooltipPlacement="leftTop" nz-button nz-tooltip>LT</button>
      <button nzTooltipTitle="prompt text" nzTooltipPlacement="left" nz-button nz-tooltip>Left</button>
      <button nzTooltipTitle="prompt text" nzTooltipPlacement="leftBottom" nz-button nz-tooltip>LB</button>
    </div>
    <div style="margin-left:270px;width: 60px;">
      <button nzTooltipTitle="prompt text" nzTooltipPlacement="rightTop" nz-button nz-tooltip>RT</button>
      <button nzTooltipTitle="prompt text" nzTooltipPlacement="right" nz-button nz-tooltip>Right</button>
      <button nzTooltipTitle="prompt text" nzTooltipPlacement="rightBottom" nz-button nz-tooltip>RB</button>
    </div>
    <div style="margin-left:60px;clear: both;">
      <button nzTooltipTitle="prompt text" nzTooltipPlacement="bottomLeft" nz-button nz-tooltip>BL</button>
      <button nzTooltipTitle="prompt text" nzTooltipPlacement="bottom" nz-button nz-tooltip>Bottom</button>
      <button nzTooltipTitle="prompt text" nzTooltipPlacement="bottomRight" nz-button nz-tooltip>BR</button>
    </div>
  `,
  styles: [
    `
      button {
        width: 70px;
        text-align: center;
        padding: 0;
        margin-right: 8px;
        margin-bottom: 8px;
      }
    `
  ]
})
export class NzDemoTooltipPlacementComponent {}

nzTooltipTitle accept the type of TemplateRef<void>

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

@Component({
  selector: 'nz-demo-tooltip-template',
  template: `
    <a nz-tooltip [nzTooltipTitle]="titleTemplate">This Tooltip Have Icon</a>
    <ng-template #titleTemplate>
      <i nz-icon nzType="file" style="margin-right: 8px"></i> <span>Tooltip With Icon</span>
    </ng-template>
  `
})
export class NzDemoTooltipTemplateComponent {}

API#

[nz-tooltip]#

PropertyDescriptionTypeDefault
[nzTooltipTitle]The text shown in the tooltipstring | TemplateRef<void>-
[nzTooltipTrigger]Tooltip trigger mode'click' | 'focus' | 'hover''hover'
[nzTooltipPlacement]The position of the tooltip 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.

Common API#

The following APIs are shared by nz-tooltip, nz-popconfirm, nz-popover.

PropertyDescriptionTypeDefault
[nzMouseEnterDelay]Delay in seconds, before tooltip is shown on mouse enternumber0.15
[nzMouseLeaveDelay]Delay in seconds, before tooltip is hidden on mouse leavenumber0.1
[nzOverlayClassName]Class name of the tooltip cardstring-
[nzOverlayStyle]Style of the tooltip cardobject-
[nzVisible]Whether the floating tooltip card is visible or notbooleanfalse
(nzVisibleChange)Callback executed when visibility of the tooltip card is changedEventEmitter<boolean>-
MethodDescription
showShow
hideHide
updatePositionUpdate position

Note#

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