Tooltip
A concise, non-interactive description layer with logical placement, intent-aware delays and deterministic accessible ownership.
GET STARTED
Import
Import the standalone directive from the granular Tooltip entry point.
Descriptive action
Hover or focus the action. Tooltip augments the visible label; it never replaces the control's accessible name.
Logical positions
Eight placements share the global overlay positioner. Start and end mirror under RTL; collisions flip or clamp inside the viewport.
Intent delays and disabled state
Opening and closing delays are independent. Disabled state prevents activation and immediately removes an open tooltip.
Reactive content
Signal input changes update both visible content and the active accessible description without recreating consumer state.
Imperative visibility
Template export exposes show, hide and readonly visible state for guided experiences while hover and focus remain available.
Disabled native controls
Disabled controls cannot receive focus. Put the explanation on a focusable wrapper and include the reason in its accessible name.
Unstyled and typed slots
Positioning, top-layer behavior and ARIA stay active while Tailwind owns the root, content and arrow surfaces.
TOOLTIP
Accessibility
A supplemental description announced from the trigger without stealing focus or accepting interaction.
Description ownership
The floating host uses role="tooltip". While visible, its stable ID is merged into the actual interactive trigger's aria-describedby; existing tokens are preserved and restored on close.
Keyboard
Keyboard focus opens the description after showDelay. Escape dismisses immediately and stops only the active Tooltip dismissal event. Trigger activation also closes the surface.
Pointer and focus continuity
Moving between pointer and keyboard intent does not flicker the overlay. It remains visible while either hover or focus ownership is active, then honors hideDelay.
Content rules
Tooltip accepts plain, concise, non-interactive text. It must not contain buttons, links, forms or essential instructions. Use Popover for rich or interactive disclosure content.
RTL and viewport safety
Logical start/end follow computed writing direction. The shared positioner flips insufficient placements, clamps the result and keeps the arrow aligned with the resolved anchor.
SSR and lifecycle cleanup
Server rendering creates no floating DOM. Timers, position observers, application views, generated nodes and temporary ARIA tokens are removed deterministically on destroy.
TOOLTIP
API
One standalone attribute directive, typed logical positions and three visual class slots.
Directive
NeuralTooltip[neuralTooltip]Owns trigger events, accessible description linkage, renderer lifecycle and positioning.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| neuralTooltip | string | '' | Plain descriptive tooltip content. |
| tooltipPosition | NeuralTooltipPosition | 'top' | Requested logical overlay placement. |
| tooltipDisabled | boolean | false | Prevents opening and closes an active tooltip. |
| showDelay | number | 300 | Pointer or focus opening delay in ms. |
| hideDelay | number | 80 | Leave or blur closing delay in ms. |
| tooltipId | string | null | null | Stable ID used by aria-describedby; generated when absent. |
| tooltipClass | string | '' | Additional class applied to the floating root. |
| classes | NeuralTooltipClasses | {} | Typed classes for every slot. |
| unstyled | boolean | false | Removes NeuralNg visual classes. |
State and methods
visible: Signal<boolean>Readonly rendered visibility state.
show(): voidSchedules opening with the configured show delay.
hide(immediate = false): voidSchedules closing or destroys the renderer immediately.
Typed class slots
rootFixed-position top-layer host and placement state.
contentText surface containing the accessible description.
arrowPosition-aware decorative arrow.
Public types
NeuralTooltipPosition'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right'
NeuralTooltipClassesTyped root, content and arrow class ownership.
Compatibility alias
TooltipDirective remains a deprecated alias. New code and generated AI output should import NeuralTooltip.
TOOLTIP
Design tokens
Surface, typography, arrow geometry and motion remain independently customizable.
Surface
--neural-tooltip-colorTooltip foreground color.
--neural-tooltip-backgroundTooltip background surface.
--neural-tooltip-borderTooltip border shorthand.
--neural-tooltip-radiusTooltip corner radius.
--neural-tooltip-shadowTooltip box shadow.
--neural-tooltip-paddingTooltip internal spacing.
Typography
--neural-tooltip-font-familyTooltip font family.
--neural-tooltip-font-sizeTooltip font size.
--neural-tooltip-font-weightTooltip font weight.
--neural-tooltip-line-heightTooltip line height.
Arrow and sizing
--neural-tooltip-max-widthTooltip maximum inline size.
--neural-tooltip-z-indexTooltip stacking order.
--neural-tooltip-arrow-sizeTooltip arrow width and height.
--neural-tooltip-arrow-corner-offsetTooltip arrow corner positional offset.
Motion
--neural-tooltip-enter-scaleTooltip enter animation starting scale.
--neural-tooltip-enter-durationTooltip enter animation duration.
--neural-tooltip-enter-easingTooltip enter animation easing curve.
--neural-tooltip-leave-durationTooltip leave animation duration.