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.

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 nzTitle="prompt text">Tooltip will show when mouse enter.</span>
  `
})
export class NzDemoTooltipBasicComponent {}

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-tooltip-arrow-point-at-center',
  template: `
    <button nz-button nzTitle="prompt text" nzPlacement="topLeft" nz-tooltip>Align edge / 边缘对齐</button>
    <button nz-button nzTitle="prompt text" nzPlacement="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 nzTitle="prompt text" nzPlacement="topLeft" nz-button nz-tooltip>TL</button>
      <button nzTitle="prompt text" nzPlacement="top" nz-button nz-tooltip>Top</button>
      <button nzTitle="prompt text" nzPlacement="topRight" nz-button nz-tooltip>TR</button>
    </div>
    <div style="float:left;width: 60px;">
      <button nzTitle="prompt text" nzPlacement="leftTop" nz-button nz-tooltip>LT</button>
      <button nzTitle="prompt text" nzPlacement="left" nz-button nz-tooltip>Left</button>
      <button nzTitle="prompt text" nzPlacement="leftBottom" nz-button nz-tooltip>LB</button>
    </div>
    <div style="margin-left:270px;width: 60px;">
      <button nzTitle="prompt text" nzPlacement="rightTop" nz-button nz-tooltip>RT</button>
      <button nzTitle="prompt text" nzPlacement="right" nz-button nz-tooltip>Right</button>
      <button nzTitle="prompt text" nzPlacement="rightBottom" nz-button nz-tooltip>RB</button>
    </div>
    <div style="margin-left:60px;clear: both;">
      <button nzTitle="prompt text" nzPlacement="bottomLeft" nz-button nz-tooltip>BL</button>
      <button nzTitle="prompt text" nzPlacement="bottom" nz-button nz-tooltip>Bottom</button>
      <button nzTitle="prompt text" nzPlacement="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 {}

nzTitle accept the type of TemplateRef<void>

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

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

API#

Import this Component Individually#

You can get more detail here.

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

[nz-tooltip]#

PropertyDescriptionTypeDefault
[nzTitle]The text shown in the tooltipstring|TemplateRef<void>-

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-
[nzPlacement]The position of the tooltip relative to the target'top'|'left'|'right'|'bottom'|'topLeft'|'topRight'|'bottomLeft'|'bottomRight'|'leftTop'|'leftBottom'|'rightTop'|'rightBottom''top'
[nzTrigger]Tooltip trigger mode'click'|'focus'|'hover''hover'
[nzVisible]Whether the floating tooltip card is visible or notbooleanfalse
(nzVisibleChange)Callback executed when visibility of the tooltip card is changedEventEmitter<boolean>-

Note#

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