HoverCard shows additional information when the user hovers or focuses a trigger element. Use it for profile cards, link summaries, or inline definitions where the user needs more context without navigating away.
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
HoverCard shows additional information when the user hovers or focuses a trigger element. Use it for profile cards, link summaries, or inline definitions where the user needs more context without navigating away.
Keep content supplementary; hover cards should enhance understanding without blocking the primary workflow.
Provide a dashed underline on text triggers so users know the element is hoverable.
Use the hook API (useHoverCard) when you need more control over timing or placement.
Leave touchTrigger on auto so a tap opens the card on triggers that do nothing else, and stays out of the way on triggers that perform an action.
Place critical actions or required information inside a hover card; users may miss content that only appears on hover.
Use a hover card when a simple Tooltip or Popover would suffice.
Use a HoverCard for content the user must interact with; it disappears when the cursor leaves.
Prefer placing HoverCard in a block context rather than directly in a <p>, heading, or link. Those placements are supported when necessary through a corrective portal, but the DOM and tab order may differ.
Position relative to the anchor element. Logical: start/end resolve against the popover's own inherited direction (RTL mirrors in pure CSS).
alignment
'start' | 'center' | 'end' · default 'center'
Alignment along the placement axis. Logical: start/end resolve against the popover's own inherited direction (RTL mirrors in pure CSS).
delay
number · default 300
Show delay in milliseconds.
hideDelay
number · default 200
Hide delay in milliseconds.
focusTrigger
'auto' | 'always' | 'never' · default 'auto'
Controls when focus events trigger the hover card.
touchTrigger
'auto' | 'tap' | 'none' · default 'auto'
What a tap does where there is no hover. auto opens on tap unless the trigger performs an action of its own (a button, link, or form control), whose tap belongs to the control. tap always opens. none never opens on touch. A tap-opened card is dismissed by a tap outside it.
isEnabled
boolean · default true
Enables or disables the hover and focus triggers.
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).
onOpenChange
(isOpen: boolean) => void
Callback fired when hover card visibility changes. Called with true when shown and false when hidden.
hasHoverIndication
'auto' | boolean · default 'auto'
Shows a dashed underline on the trigger element.
isDefaultOpen
boolean
Whether the hover card should be shown on mount. Still dismissible.
isOpen
boolean
Controlled open state for the hover card.
Anatomy
Trigger · required
The element that opens the hover card on hover or focus: a button, link, or inline text.
Card · required
The floating overlay with the preview content, anchored to the trigger.
Body · required
The main content area: profile info, link summary, or any rich content.
Actions · optional
Optional buttons inside the card for follow-up actions like Follow or Message.
