Tooltip文字提示

简单的文字提示气泡框。

何时使用

鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。

可用来代替系统默认的 title 提示，提供一个按钮/文字/操作的文案解释。

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

代码演示

基本

最简单的用法。

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 {}

箭头指向

通过设置 nzTooltipPlacement ，可以箭头将指向目标元素的中心。

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 {}

指定目标

通过 nzTooltipOrigin 指定 tooltip 的锚定元素（可以使用我们提供的工具类 import { NzElementPatchModule } from 'ng-zorro-antd/core/element-patch'）

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-tooltip-origin',
  template: `
    <button nz-button nz-element #button="nzElement">Action</button>
    <a nz-tooltip nzTooltipTitle="This action could not be revoked!" [nzTooltipOrigin]="button.elementRef">Notice</a>
  `,
  styles: [
    `
      button {
        margin-right: 8px;
      }
    `
  ]
})
export class NzDemoTooltipOriginComponent {}

位置

位置有 12 个方向。

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 可以传入 TemplateRef<void> 模板渲染。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-tooltip-template',
  template: `
    <a nz-tooltip [nzTooltipTitle]="titleTemplate">This Tooltip has an 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]directive

共同的 API

以下 API 为 nz-tooltip、nz-popconfirm、nz-popover 共享的 API。

非body滚轴事件需要更新CDK的位置

在tooltip相关(包括popconfirm、popover)的组件使用中，body的滚轴事件会刷新tooltip的位置。如果是自定义容器的滚轴事件则不会刷新，你可以在自定义容器上添加 cdkScrollable 指令以达到该目的。注意，这里需要导入相关的包 import {ScrollingModule} from '@angular/cdk/scrolling';，更多信息请参考 scrolling/api。

注意

请确保 [nz-tooltip] 元素能接受 onMouseEnter、onMouseLeave、onFocus、onClick 事件。