HoverCard Props

Name	Type	Default	Description
content	string	''	Plain-text card content. Use the content slot for rich content.
placement	'above' | 'below' | 'start' | 'end'	'above'	Side of the trigger. The card flips to the opposite side when there is no room.
alignment	'start' | 'center' | 'end'	'center'	Alignment along the placement axis.
delay	number	300	Milliseconds before showing on hover.
hideDelay	number	200	Milliseconds before hiding. The pointer entering the card within this window cancels the hide.
focusTrigger	'auto' | 'always' | 'never'	'auto'	Whether focus opens the card. auto listens only when the trigger is itself focusable.
touchTrigger	'auto' | 'tap' | 'none'	'auto'	Tap behavior on touch. auto opens on a trigger that performs no action of its own and leaves the tap to buttons and links; tap always opens; none never opens. A tap-opened card closes on a tap outside.
isEnabled	boolean	true	Enables the hover and focus triggers. Setting it to false also closes an open card.
label	string	—	Accessible name for the card. With it the card is a named role="dialog"; without it, a role="group".
hasHoverIndication	'auto' | boolean	'auto'	Dashed underline on the trigger. auto applies it only to a text-only trigger.
isOpen	boolean	—	Controlled visibility. Hover and focus are ignored when set.
isDefaultOpen	boolean	false	Show the card on mount. Only applies when isOpen is unset.

Events

• openChange(isOpen: boolean): fires when the card shows or hides. In the controlled mode, Escape emits false and the parent decides whether to close.

Slots

Name	Description
default	The trigger. Plain text gains a dashed underline and becomes focusable; an element becomes the trigger that receives the events and ARIA attributes.
content	The card content, rich markup included. Replaces the content prop.

Methods

• show(): shows the card immediately, skipping the hover delay.
• hide(): hides the card immediately.
• element: the card layer element, or null before it mounts.

Native attributes

The component renders a fragment: a trigger wrapper <span class="astryx-hover-card__trigger"> plus a layer teleported to body. Attributes land on the wrapper; the layer receives none.

• HTML attributes, aria-*, data-*, class, and style all go to the wrapper.
• The wrapper is a display: contents box when the trigger is an element, and the trigger itself, display: inline, when the trigger is plain text. Put layout attributes on the trigger element directly; on a text trigger you can put them on the component.
• The aria-haspopup, aria-controls, aria-expanded, and aria-describedby the component manages are written onto the real trigger element and restored to their previous values when it unmounts.

Theme

.my-hover-card {
  --astryx-hover-card-background: #fff;
  --astryx-hover-card-foreground: #171717;
}

• --astryx-hover-card-background: card background.
• --astryx-hover-card-foreground: card text color.
• --astryx-hover-card-shadow: card elevation.
• --astryx-hover-card-radius: card radius, defaulting to --astryx-radius-container.
• --astryx-hover-card-indication-color: dashed underline color.
• --astryx-hover-card-z-index: stacking order of the card.