• Tooltip文字提示
    • 何时使用
    • 代码演示
    • API
      • 单独引入此组件
      • [nz-tooltip]directive
      • 共同的 API
    • 注意

    Tooltip文字提示

    简单的文字提示气泡框。

    何时使用

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

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

    代码演示

    Tooltip文字提示 - 图1

    基本

    最简单的用法。

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

    Tooltip文字提示 - 图2

    箭头指向

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

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

    Tooltip文字提示 - 图3

    位置

    位置有 12 个方向。

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

    Tooltip文字提示 - 图4

    模板渲染

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

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

    API

    单独引入此组件

    想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

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

    [nz-tooltip]directive

    参数说明类型默认值
    [nzTitle]提示文字string｜TemplateRef<void>-

    共同的 API

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

    参数说明类型默认值
    [nzMouseEnterDelay]鼠标移入后延时多少才显示 Tooltip，单位：秒number0.15
    [nzMouseLeaveDelay]鼠标移出后延时多少才隐藏 Tooltip，单位：秒number0.1
    [nzOverlayClassName]卡片类名string-
    [nzOverlayStyle]卡片样式object-
    [nzPlacement]气泡框位置'top'｜'left'｜'right'｜'bottom'｜'topLeft'｜'topRight'｜'bottomLeft'｜'bottomRight'｜'leftTop'｜'leftBottom'｜'rightTop'｜'rightBottom''top'
    [nzTrigger]触发行为，可选 hover/focus/click'click'｜'focus'｜'hover''hover'
    [nzVisible]用于手动控制浮层显隐booleanfalse
    (nzVisibleChange)显示隐藏的回调EventEmitter<boolean>-

    注意

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