API: Primitives
TooltipDirective
Headless tooltip directive.
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:55
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 |
Properties
| Name | Type | Description |
|---|---|---|
readonly tooltipId |
WritableSignal<string | null> |
Public methods
show
show(): void
Programmatically show the tooltip
hide
hide(): void
Programmatically hide the tooltip