A simple text popup tip.

When To Use#

  • The Tooltip doesn't support complex text or operations. The tip is shown on mouse enter and is hidden on mouse leave.
  • It's often used instead of the HTML title attribute to explain button/text/operation.
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';


Tooltip will show when mouse enter.

The simplest usage.

expand codeexpand code

By specifying nzTooltipArrowPointAtCenter prop, the arrow can be point to the center of the target element.

expand codeexpand code

Use nzTooltipOrigin to set the origin of the tooltip (You can use the util class we provide import { NzElementPatchModule } from 'ng-zorro-antd/core/element-patch').

expand codeexpand code

The ToolTip has 12 placements choice.

expand codeexpand code

nzTooltipTitle accept the type of TemplateRef<any>

expand codeexpand code

We preset a series of colorful Tooltip styles for use in different situations.

expand codeexpand code



[nzTooltipArrowPointAtCenter]Arrow point at center of the originbooleanfalse
[nzTooltipTitle]The text shown in the tooltipstring | TemplateRef<void>-
[nzTooltipTitleContext]The context of tooltip titleobject-
[nzTooltipTrigger]Tooltip trigger mode. If set to null it would not be triggered'click' | 'focus' | 'hover' | null'hover'
[nzTooltipPlacement]The position of the tooltip relative to the target'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom' | Array<string>'top'
[nzTooltipColor]The background colorstring-
[nzTooltipOrigin]Origin of the tooltipElementRef-
[nzTooltipVisible]Show or hide tooltipbooleanfalse
(nzTooltipVisibleChange)Callback of hide or showEventEmitter<boolean>-
[nzTooltipMouseEnterDelay]Delay in seconds, before tooltip is shown on mouse enternumber0.15
[nzTooltipMouseLeaveDelay]Delay in seconds, before tooltip is hidden on mouse leavenumber0.1
[nzTooltipOverlayClassName]Class name of the tooltip cardstring-
[nzTooltipOverlayStyle]Style of the tooltip cardobject-

Common API#

The following APIs are shared by nz-tooltip, nz-popconfirm, nz-popover.

updatePositionUpdate position

Exclude body element's scroll event need to refresh the position of CDK#

In using the tooltip (including popconfirm、popover), the body element's scroll event will update the position of the tooltip. It will never update the tooltip's position if the scroll event happens in a custom element. You can add the cdkScrollable directive to achieve the goal. Take notice that you need to import relative package import {ScrollingModule} from '@angular/cdk/scrolling';, for more information you can visit scrolling/api.


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