Client component
Hover Card
A rich preview that opens on hover intent: the "profile card on a mention" pattern. Unlike Tooltip, the content is interactive: the close delay gives the pointer a grace period to travel into the card, and entering it cancels the close, so links and buttons inside are usable.
Mentioned by @astralis in the release notes.
import { HoverCard, Avatar, Button, HStack, VStack, Text, Link } from "astralis-ui";
export function HoverCardDemo() {
return (
<Text size="sm">
Mentioned by{" "}
<HoverCard>
<HoverCard.Trigger>
<Link href="#astralis">@astralis</Link>
</HoverCard.Trigger>
<HoverCard.Content>
<HStack gap="3" alignItems="start">
<Avatar name="Astralis UI" />
<VStack gap="1" alignItems="start">
<Text size="sm" weight="semibold">
Astralis UI
</Text>
<Text size="xs" color="muted">
React 19 components on semantic design tokens. Server-first,
precompiled CSS.
</Text>
<Button size="xs" variant="outline" colorScheme="gray">
Follow
</Button>
</VStack>
</HStack>
</HoverCard.Content>
</HoverCard>{" "}
in the release notes.
</Text>
);
}side
align
sideOffset
openDelay
closeDelay
import { HoverCard, Link, Text } from "astralis-ui";
<HoverCard>
<HoverCard.Trigger>
<Link href="#astralis">@astralis</Link>
</HoverCard.Trigger>
<HoverCard.Content>
<Text size="sm" weight="semibold">Astralis UI</Text>
<Text size="xs" color="muted">React 19 components on semantic design tokens.</Text>
</HoverCard.Content>
</HoverCard>
Import#
import { HoverCard } from "astralis-ui";Tooltip vs Hover Card#
- Tooltip: a short text label,
role="tooltip", pointer-events off. - HoverCard: a raised card with real content; supplementary by nature, so keyboard users get it on focus and the underlying link still works without it.
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
open · defaultOpen · onOpenChange | boolean · boolean · (open: boolean) => void | None · false · None | Controlled / initial state, and the change callback. |
side | "top" | "right" | "bottom" | "left" | "bottom" | Preferred side of the trigger. |
align | "start" | "center" | "end" | "center" | Alignment along that side. |
sideOffset | number | 8 | Gap between the trigger and the card, in pixels. |
avoidCollisions | boolean | true | Flips to the opposite side when the card would overflow the viewport. |
openDelay | number | 400 | How long the pointer must rest on the trigger before the card opens, in ms. |
closeDelay | number | 200 | Grace period for the pointer to travel into the card before it closes, in ms. |
Parts#
| Prop | Type | Default | Description |
|---|---|---|---|
HoverCard.Trigger | children: ReactElement | None | Wraps a single element, typically a Link. Hover and focus open the card. |
HoverCard.Content | div props | None | The raised card. Its content can be interactive. |
Keyboard#
| Key | Action |
|---|---|
Tab onto the trigger | Open the card at once, with no delay |
Tab off the trigger | Close the card |
Esc | Close the card |
Because moving focus off the trigger closes the card, controls inside it can't be reached from the keyboard. Keep everything in the card available elsewhere, typically on the page the trigger links to.