Hover Card primitive

Headless Hover Card: the behavior, keyboard support and ARIA of its pattern, with no styles.

@ndop/primitives/hover-card

Import

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

import {
  NdHoverCard,
  NdHoverCardContent,
  NdHoverCardPortal,
  NdHoverCardTrigger,
} from '@ndop/primitives/hover-card';

Accessibility

Keyboard

Keys the component handles.

Key	Action
`Tab`	Focusing the trigger opens the card after the delay; leaving it closes it.
`Escape`	Closes the card without moving focus.
`Tab`	Focusing the trigger shows the tooltip; moving focus away hides it.
`Escape`	Hides the tooltip without moving focus.

Focus

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

Right-to-left

start and end sides are logical and swap in right-to-left layouts. As in Popover's spec.md: start and end sides and alignments swap in RTL.

API reference

NdHoverCard

[ndHoverCard]from @ndop/primitives/hover-card

Root of a hover card: a preview of what's behind a link, such as a profile behind a username, for sighted pointer and keyboard users. It composes the Tooltip primitive's root, so it shares its delays (700 ms to open, 300 ms to close), positioning and Escape handling, but its content has no role and nothing refers to it: the link must say everything on its own. Put it on an ng-container.

NdHoverCard 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`

NdHoverCardContent

[ndHoverCardContent]from @ndop/primitives/hover-card

The card. It stays open while the pointer is over it, and sits on its trigger's side, flipping to fit the viewport; data-side and data-align say where it ended up.

NdHoverCardContent binding	Type	Default
`[side]` Side of the trigger it sits on, before flipping.	`'start' \| 'end' \| 'bottom' \| 'top'`	`'bottom'`
`[align]` Alignment along that side.	`'start' \| 'end' \| 'center'`	`'center'`
`[sideOffset]` Gap between the trigger and the card, in pixels.	`number`	`4`

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

NdHoverCardPortal

ng-template[ndHoverCardPortal]from @ndop/primitives/hover-card

Marks the ng-template an NdHoverCard renders while open.

NdHoverCardTrigger

[ndHoverCardTrigger]from @ndop/primitives/hover-card

What opens an NdHoverCard, usually a link: hovering it, or focusing it with the keyboard, opens the card after the open delay; leaving it, or blur, closes it after the close delay.

Data attribute	Values
`data-state`	—