Tooltip

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';

Examples

Tooltip will show when mouse enter.

The simplest usage.

expand codeexpand code
Loading...

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

expand codeexpand code
Loading...
Notice

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
Loading...

The ToolTip has 12 placements choice.

expand codeexpand code
Loading...

nzTooltipTitle accept the type of TemplateRef<any>

expand codeexpand code
Loading...
PresetCustom

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

expand codeexpand code
Loading...

API#

[nz-tooltip]#

PropertyDescriptionTypeDefault
[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.

MethodDescription
showShow
hideHide
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.

Note#

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