Tooltip primitive

Headless Tooltip: the behavior, keyboard support and ARIA of the WAI-ARIA Tooltip pattern, with no styles.

@ndop/primitives/tooltip
WAI-ARIA: Tooltip

Import

Primitives ship in the @ndop/primitives package and have no styles. Their state is on data attributes for you to style. The styled Tooltip is built on this one.

import {
  NdTooltip,
  NdTooltipContent,
  NdTooltipPortal,
  NdTooltipTrigger,
} from '@ndop/primitives/tooltip';

Accessibility

Implements the Tooltip pattern of the WAI-ARIA Authoring Practices.

Keyboard

Keys the component handles.

Key	Action
`Tab`	Focusing the trigger shows the tooltip; moving focus away hides it.
`Escape`	Hides the tooltip without moving focus.

Focus

The tooltip never takes focus; focus stays on the trigger.

Right-to-left

As in Popover's spec.md: start and end sides and alignments swap in RTL.

API reference

NdTooltip

[ndTooltip]from @ndop/primitives/tooltip

Root of a tooltip (WAI-ARIA Tooltip pattern): a short description shown next to its trigger. Opens when the pointer rests on the trigger (after openDelay) or when the trigger gets keyboard focus (at once); closes when the pointer leaves trigger and content (after closeDelay), on blur and on Escape. The content can be hovered, as WCAG 1.4.13 requires, and never takes focus. Put it on an ng-container so it adds no element.

NdTooltip binding	Type	Default
`[defaultOpen]` Initial open state when `open` is not bound.	`boolean`	`false`
`[openDelay]` Delay before opening on hover, in milliseconds.	`number`	`700`
`[closeDelay]` Delay before closing once the pointer has left, in milliseconds.	`number`	`300`
`[(open)]` Whether the tooltip is open. Two-way bindable with `[(open)]`.	`boolean`	`false`

NdTooltipContent

[ndTooltipContent]role tooltipfrom @ndop/primitives/tooltip

The tooltip panel: role="tooltip", never focusable, with data-side and data-align reporting where it actually sits. While it is rendered, its id is in the trigger's aria-describedby. Hovering it keeps the tooltip open.

NdTooltipContent binding	Type	Default
`[side]` Preferred side of the trigger; `start` and `end` swap in RTL. Defaults to `top`, as in Radix and shadcn.	`'start' \| 'end' \| 'bottom' \| 'top'`	`'top'`
`[align]` Preferred alignment along that side.	`'start' \| 'end' \| 'center'`	`'center'`
`[sideOffset]` Gap from the trigger, in pixels.	`number`	`4`

Data attribute	Values
`data-state`	—
`data-side`	—
`data-align`	—

NdTooltipPortal

ng-template[ndTooltipPortal]from @ndop/primitives/tooltip

Marks the ng-template whose content the NdTooltip renders while open.

NdTooltipTrigger

[ndTooltipTrigger]from @ndop/primitives/tooltip

The element the tooltip describes. Hovering it opens the tooltip after the open delay, keyboard focus opens it at once, and leaving or blurring it closes it. While open, the content's id is added to its aria-describedby, keeping ids already there.

Manages aria-describedby.

Data attribute	Values
`data-state`	—