Tooltip

Simple text popup box.

Import

Source

components/tooltip

Docs

Edit this page

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.
To provide an explanation fo a button/text/operation. It's often used instead of the HTML title attribute to explain button/text/operation.

Examples#

Arrow pointing at the center

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

      Loading...

Notice

Target

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').

      Loading...

Preset

Custom

Colorful tooltip

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

      Loading...

API#

Property	Description	Type	Default
`[nzTooltipArrowPointAtCenter]`	Arrow point at center of the origin	`boolean`	`false`
`[nzTooltipTitle]`	The text shown in the tooltip	`string \| TemplateRef<void>`	-
`[nzTooltipTitleContext]`	The context of tooltip title	`object`	-
`[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 color	`string`	-
`[nzTooltipOrigin]`	Origin of the tooltip	`ElementRef`	-
`[nzTooltipVisible]`	Show or hide tooltip	`boolean`	`false`
`(nzTooltipVisibleChange)`	Callback of hide or show	`EventEmitter<boolean>`	-
`[nzTooltipMouseEnterDelay]`	Delay in seconds, before tooltip is shown on mouse enter	`number`	`0.15`
`[nzTooltipMouseLeaveDelay]`	Delay in seconds, before tooltip is hidden on mouse leave	`number`	`0.1`
`[nzTooltipOverlayClassName]`	Class name of the tooltip card	`string`	-
`[nzTooltipOverlayStyle]`	Style of the tooltip card	`object`	-

Common API#

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

Method	Description
`show()`	Show
`hide()`	Hide
`updatePosition()`	Update 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.

FAQ#

Q: The overlay layer element does not follow the scroll position when scrolling#

By default, the overlay layer element uses body as the scroll container. If using another scroll container, add the CdkScrollable directive to the custom scroll container element. Note: You need to import the CdkScrollable directive or ScrollingModule module from @angular/cdk/scrolling.