Headless hook for hover-triggered floating cards. Builds on useLayer with hover/focus intent detection, configurable delays, safe hover behavior, and accessible aria-describedby linking. Use for rich previews on hover when you need full control over the trigger or rendered content.
What a tap does where there is no hover. auto opens on tap unless the trigger performs an action of its own; tap always opens; none never opens on touch.
isEnabled
boolean · optional · default true
Whether hover and focus triggers are enabled.
label
string
Accessible name for the hover card popup. When provided, the popup is exposed as a named role="dialog"; when omitted, it falls back to role="group" (a group may validly be unnamed).
Render function for the anchor-positioned hover card content. The positioning opt-out is excluded: the hover card always derives its position from placement/alignment.
show
() => void
Imperatively show the hover card immediately.
hide
() => void
Imperatively hide the hover card immediately.
Showcases and examples
2 documented examples
Hover Card
A hover card that shows a user profile preview when hovering over a trigger button. Starts open for preview.
Preview loads on approachPreview loads on approach
Exact source · hover-card-showcase
// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';
import {HoverCard} from '@astryxdesign/core/HoverCard';
import {Button} from '@astryxdesign/core/Button';
import {Stack} from '@astryxdesign/core/Layout';
import {Text, Heading} from '@astryxdesign/core/Text';
import {Avatar} from '@astryxdesign/core/Avatar';
export default function HoverCardShowcase() {
return (
<HoverCard
placement="above"
content={
<Stack direction="vertical" gap={2} style={{width: 240}}>
<Stack direction="horizontal" gap={2} vAlign="center">
<Avatar name="Jane Doe" size="lg" />
<Stack direction="vertical" gap={0}>
<Heading level={5}>Jane Doe</Heading>
<Text type="supporting" color="secondary">
Software Engineer
</Text>
</Stack>
</Stack>
<Text type="body" color="secondary">
Building great products with great people.
</Text>
</Stack>
}>
<Button label="@janedoe" variant="ghost" />
</HoverCard>
);
}
Usage
Headless hook for hover-triggered floating cards. Builds on useLayer with hover/focus intent detection, configurable delays, safe hover behavior, and accessible aria-describedby linking. Use for rich previews on hover when you need full control over the trigger or rendered content.
Use for rich content previews such as user profiles, entity summaries, and link previews.
Prefer the HoverCard component for standard trigger-content pairs; use the hook for custom trigger patterns.
