CngxTooltip
projects/common/popover/tooltip.directive.ts
Import#
import { CngxTooltip } from '@cngx/common/popover'
Description#
String-input tooltip directive applied to the trigger element.
Creates the tooltip popover element internally via Renderer2 and manages
the full lifecycle: hover/focus triggers, open/close delays, Escape dismiss,
CSS Anchor Positioning, and ARIA wiring (aria-describedby + role="tooltip").
The consumer sees only the attribute - no extra elements in the template.
Basic
<button cngxTooltip="Ctrl+S">Save</button>With configuration
<button cngxTooltip="Ctrl+S" tooltipPlacement="top" [tooltipDelay]="500">
Save
</button>Metadata#
Host#
Index#
Properties
Derived State
HostBindings
HostListeners
Inputs#
Whether the tooltip is active. When false, no tooltip appears and ARIA is cleared.
truePopoverPlacementAnchor-relative placement.
'top', { alias: 'tooltipPlacement' }readonly PopoverPositionTryFallback[]CSS <try-tactic> fallbacks for position-try-fallbacks. Empty array
(default) means no fallback CSS is written; the tooltip stays at the
declared tooltipPlacement regardless of viewport clipping. Tooltips
are decorative - collision recovery is opt-in per-tooltip.
[], { alias: 'tooltipPositionTryFallbacks', }TooltipTriggerModeTrigger mode. 'auto' (default) opens on hover/focus with the
configured delays; 'manual' opts the host out of the hover/focus
listeners so only show() / hide() open or close the tooltip.
Escape still dismisses an open tooltip in either mode.
'auto'Instance Properties#
Methods#
HostBindings#
| Binding | Expression |
|---|---|
[attr.aria-describedby] | ariaDescribedBy() |
[style.anchor-name] | cssAnchorName() |
HostListeners#
| Event | Handler |
|---|---|
(mouseenter) | mouseenter() |
(mouseleave) | mouseleave() |
(focus) | focus() |
(blur) | blur() |
(keydown.escape) | keydown.escape() |