Tooltip文字提示

简单的文字提示气泡框。

何时使用

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

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

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

代码演示

Tooltip文字提示 - 图1

基本

最简单的用法。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-tooltip-basic',
  4. template: `
  5. <span nz-tooltip nzTooltipTitle="prompt text">Tooltip will show when mouse enter.</span>
  6. `
  7. })
  8. export class NzDemoTooltipBasicComponent {}

Tooltip文字提示 - 图2

箭头指向

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-tooltip-arrow-point-at-center',
  4. template: `
  5. <button nz-button nzTooltipTitle="prompt text" nzTooltipPlacement="topLeft" nz-tooltip>
  6. Align edge / 边缘对齐
  7. </button>
  8. <button nz-button nzTooltipTitle="prompt text" nzTooltipPlacement="topCenter" nz-tooltip>
  9. Arrow points to center / 箭头指向中心
  10. </button>
  11. `,
  12. styles: [
  13. `
  14. button {
  15. margin-right: 8px;
  16. margin-bottom: 8px;
  17. }
  18. `
  19. ]
  20. })
  21. export class NzDemoTooltipArrowPointAtCenterComponent {}

Tooltip文字提示 - 图3

指定目标

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-tooltip-origin',
  4. template: `
  5. <button nz-button nz-element #button="nzElement">Action</button>
  6. <a nz-tooltip nzTooltipTitle="This action could not be revoked!" [nzTooltipOrigin]="button.elementRef">Notice</a>
  7. `,
  8. styles: [
  9. `
  10. button {
  11. margin-right: 8px;
  12. }
  13. `
  14. ]
  15. })
  16. export class NzDemoTooltipOriginComponent {}

Tooltip文字提示 - 图4

位置

位置有 12 个方向。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-tooltip-placement',
  4. template: `
  5. <div style="margin-left:60px;">
  6. <button nzTooltipTitle="prompt text" nzTooltipPlacement="topLeft" nz-button nz-tooltip>TL</button>
  7. <button nzTooltipTitle="prompt text" nzTooltipPlacement="top" nz-button nz-tooltip>Top</button>
  8. <button nzTooltipTitle="prompt text" nzTooltipPlacement="topRight" nz-button nz-tooltip>TR</button>
  9. </div>
  10. <div style="float:left;width: 60px;">
  11. <button nzTooltipTitle="prompt text" nzTooltipPlacement="leftTop" nz-button nz-tooltip>LT</button>
  12. <button nzTooltipTitle="prompt text" nzTooltipPlacement="left" nz-button nz-tooltip>Left</button>
  13. <button nzTooltipTitle="prompt text" nzTooltipPlacement="leftBottom" nz-button nz-tooltip>LB</button>
  14. </div>
  15. <div style="margin-left:270px;width: 60px;">
  16. <button nzTooltipTitle="prompt text" nzTooltipPlacement="rightTop" nz-button nz-tooltip>RT</button>
  17. <button nzTooltipTitle="prompt text" nzTooltipPlacement="right" nz-button nz-tooltip>Right</button>
  18. <button nzTooltipTitle="prompt text" nzTooltipPlacement="rightBottom" nz-button nz-tooltip>RB</button>
  19. </div>
  20. <div style="margin-left:60px;clear: both;">
  21. <button nzTooltipTitle="prompt text" nzTooltipPlacement="bottomLeft" nz-button nz-tooltip>BL</button>
  22. <button nzTooltipTitle="prompt text" nzTooltipPlacement="bottom" nz-button nz-tooltip>Bottom</button>
  23. <button nzTooltipTitle="prompt text" nzTooltipPlacement="bottomRight" nz-button nz-tooltip>BR</button>
  24. </div>
  25. `,
  26. styles: [
  27. `
  28. button {
  29. width: 70px;
  30. text-align: center;
  31. padding: 0;
  32. margin-right: 8px;
  33. margin-bottom: 8px;
  34. }
  35. `
  36. ]
  37. })
  38. export class NzDemoTooltipPlacementComponent {}

Tooltip文字提示 - 图5

模板渲染

nzTooltipTitle 可以传入 TemplateRef<void> 模板渲染。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-tooltip-template',
  4. template: `
  5. <a nz-tooltip [nzTooltipTitle]="titleTemplate">This Tooltip has an Icon</a>
  6. <ng-template #titleTemplate> <i nz-icon nzType="file" style="margin-right: 8px"></i> <span>Tooltip With Icon</span> </ng-template>
  7. `
  8. })
  9. export class NzDemoTooltipTemplateComponent {}

API

[nz-tooltip]directive

参数说明类型默认值
[nzTooltipTitle]提示文字string | TemplateRef<void>-
[nzTooltipTrigger]触发行为,可选 hover/focus/click,为 null 时不响应光标事件‘click’ | ‘focus’ | ‘hover’ | null‘hover’
[nzTooltipPlacement]气泡框位置‘top’ | ‘left’ | ‘right’ | ‘bottom’ | ‘topLeft’ | ‘topRight’ | ‘bottomLeft’ | ‘bottomRight’ | ‘leftTop’ | ‘leftBottom’ | ‘rightTop’ | ‘rightBottom’‘top’
[nzTooltipOrigin]气泡框定位元素ElementRef-

共同的 API

以下 API 为 nz-tooltipnz-popconfirmnz-popover 共享的 API。

参数说明类型默认值
[nzMouseEnterDelay]鼠标移入后延时多少才显示 Tooltip,单位:秒number0.15
[nzMouseLeaveDelay]鼠标移出后延时多少才隐藏 Tooltip,单位:秒number0.1
[nzOverlayClassName]卡片类名string-
[nzOverlayStyle]卡片样式object-
[nzVisible]用于手动控制浮层显隐booleanfalse
(nzVisibleChange)显示隐藏的回调EventEmitter<boolean>-
方法说明
show打开
hide隐藏
updatePosition调整位置

注意

请确保 [nz-tooltip] 元素能接受 onMouseEnteronMouseLeaveonFocusonClick 事件。