Tooltip文字提示

简单的文字提示气泡框。

何时使用#

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

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

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

代码演示

Tooltip will show when mouse enter.

最简单的用法。

expand codeexpand code
      加载中
    

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

expand codeexpand code
      加载中
    
Notice

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

expand codeexpand code
      加载中
    

位置有 12 个方向。

expand codeexpand code
      加载中
    

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

expand codeexpand code
      加载中
    
PresetCustom

我们添加了多种预设色彩的文字提示样式,供不同场景使用。

expand codeexpand code
      加载中
    

API#

[nz-tooltip]#

参数说明类型默认值
[nzTooltipArrowPointAtCenter]箭头指向锚点的中心booleanfalse
[nzTooltipTitle]提示文字string | TemplateRef<void>-
[nzTooltipTitleContext]提示文字模板上下文object-
[nzTooltipTrigger]触发行为,可选 hoverfocusclick,为 null 时不响应光标事件
[nzTooltipPlacement]气泡框位置'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom' | Array<string>'top'
[nzTooltipColor]背景颜色string-
[nzTooltipOrigin]气泡框定位元素ElementRef-
[nzTooltipVisible]显示隐藏气泡框booleanfalse
(nzTooltipVisibleChange)显示隐藏的事件EventEmitter<boolean>-
[nzTooltipMouseEnterDelay]鼠标移入后延时多少才显示 Tooltip,单位:秒number0.15
[nzTooltipMouseLeaveDelay]鼠标移出后延时多少才隐藏 Tooltip,单位:秒number0.1
[nzTooltipOverlayClassName]卡片类名string-
[nzTooltipOverlayStyle]卡片样式object-

共同的 API#

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

方法说明
show打开
hide隐藏
updatePosition调整位置

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

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

注意#

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