API reference
Headless tooltip is built from one root directive plus two slot directives. The root owns open delays, floating placement, and dismissal behavior.
Root directive
| Directive / API | Type | Description |
|---|---|---|
tngTooltip | directive | Registers the tooltip interaction layer, trigger, and floating content as one behavior unit. |
side | 'top' | 'right' | 'bottom' | 'left' | Requested placement side. The runtime may flip when space is constrained. |
openDelay, closeDelay | number | Delay in milliseconds before the tooltip opens or closes. |
defaultOpen | boolean | Initial uncontrolled state. |
open | boolean | undefined | Optional controlled open state when you want the owner to drive visibility. |
disabled | boolean | Disables hover and focus interactions and forces the tooltip closed. |
openChange | boolean | Emits whenever root-managed open state changes. |
Slot directives
| Directive | Purpose | Key inputs / reflected attrs |
|---|---|---|
tngTooltipTrigger | Applies trigger semantics, hover/focus listeners, aria-describedby, and state hooks. | open, disabled, describedBy, data-state |
tngTooltipContent | Applies tooltip role, generated or explicit ID, side hooks, hidden state, and root-owned coordinates. | id, open, side, data-side, [hidden] |
Behavior and events
- When used under
tngTooltip, the content gets fixed-positionleftandtopstyles from the runtime. - The root uses JavaScript positioning with viewport collision handling and side flipping.
Escape, outside pointer, blur, and mouseleave all close a root-managed tooltip.- Tooltip content stays presentational only. Keep actions and focusable controls in popovers, not tooltips.