TooltipDirective

Overview

Headless tooltip directive. Attach to any element to show a tooltip on hover/focus.

Usage with string:

<button qzTooltip="Save changes" tooltipPlacement="bottom">Save</button>

Usage with template:

<button [qzTooltip]="richTpl" tooltipPlacement="right">Info</button>
<ng-template #richTpl>
  <div class="my-tooltip"><strong>Rich</strong> content</div>
</ng-template>

• Kind: Directive
• Export as: qzTooltip
• Source: packages/primitives/src/tooltip/tooltip.directive.ts:59

Selector

[qzTooltip]

Inputs

Input	Type	Default	Required	Description
qzTooltip	string | TemplateRef<unknown>	''		Tooltip content — plain string or TemplateRef for rich HTML
tooltipPlacement	OverlayPlacement	'top'
tooltipDelay	number	DEFAULT_TOOLTIP_CONFIG.showDelay
tooltipHideDelay	number	DEFAULT_TOOLTIP_CONFIG.hideDelay
tooltipOffset	number	DEFAULT_TOOLTIP_CONFIG.offset
tooltipDisabled	boolean	false
tooltipArrowSize	number | undefined	undefined		Opts into arrow geometry: the length in px of the arrow you render along the tooltip edge. Leave unset for no arrow data. See TooltipDirective.arrow.
tooltipArrowPadding	number	0		Minimum px between the arrow and either end of the tooltip edge.

Properties

Name	Type	Description
readonly tooltipId	WritableSignal<string | null>
readonly arrow	Signal<OverlayArrowGeometry | null>	Geometry for a consumer-rendered arrow while the tooltip is open (requires tooltipArrowSize). Follows the surface after flip, shift and resize. null when closed. Check available before rendering: it is false when no safe position exists.
readonly resolvedPlacement	Signal<TooltipPlacement | null>	Resolved physical placement after flip; null while closed.
readonly context	TooltipContext	Template context for TemplateRef content: let-arrow="arrow" let-placement="placement".

Public methods

show

show(): void

Programmatically show the tooltip

hide

hide(): void

Programmatically hide the tooltip

Related types

• TooltipContext
• TooltipPlacement