HoverCard
A preview on hover that is also reachable by keyboard.
@luc/uiExamples
Default
A preview on hover with a longer delay than a tooltip; the trigger is focusable and the card follows focus.
<HoverCard>
<HoverCardTrigger asChild>
<Button variant="ghost">@momentum</Button>
</HoverCardTrigger>
<HoverCardContent width="sm">
<Text variant="label" as="p">Momentum</Text>
</HoverCardContent>
</HoverCard>Usage
import { HoverCard, HoverCardTrigger, HoverCardContent } from "@luc/ui";<HoverCard>
<HoverCardTrigger asChild>
<Link href="/people/ada">Ada Rensselaer</Link>
</HoverCardTrigger>
<HoverCardContent>
Quantitative researcher, Rotterdam.
</HoverCardContent>
</HoverCard>Package setup — peer requirements, the stylesheet and the provider — is on installation.
API
Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.
| Export | Kind | Signature |
|---|---|---|
HoverCard | 6 documented props | import("@types/react").FC<RadixHoverCard.HoverCardProps> |
HoverCardContent | 18 documented props | ({ className, width, align, sideOffset, ...props }: HoverCardContentProps) => import("@types/react").JSX.Element |
HoverCardPortal | 3 documented props | import("@types/react").FC<RadixHoverCard.HoverCardPortalProps> |
HoverCardTrigger | 1 documented props | import("@types/react").ForwardRefExoticComponent<RadixHoverCard.HoverCardTriggerProps & import("@types/react").RefAttributes<HTMLAnchorElement>> |
HoverCard props
Type: HoverCardProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
children?inherited | ReactNode | — | |
closeDelay?inherited | number | undefined | — | |
defaultOpen?inherited | boolean | undefined | — | |
onOpenChange?inherited | ((open: boolean) => void) | undefined | — | |
open?inherited | boolean | undefined | — | |
openDelay?inherited | number | undefined | — |
HoverCardContent props
Type: HoverCardContentProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
align?inherited | "center" | "start" | "end" | undefined | — | |
alignOffset?inherited | number | undefined | — | |
arrowPadding?inherited | number | undefined | — | |
asChild?inherited | boolean | undefined | — | |
avoidCollisions?inherited | boolean | undefined | — | |
collisionBoundary?inherited | Boundary | Boundary[] | undefined | — | |
collisionPadding?inherited | number | Partial<Record<"top" | "right" | "bottom" | "left", number>> | undefined | — | |
forceMount?inherited | true | undefined | — | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
hideWhenDetached?inherited | boolean | undefined | — | |
onEscapeKeyDown?inherited | ((event: KeyboardEvent) => void) | undefined | — | Event handler called when the escape key is down. Can be prevented. |
onFocusOutside?inherited | ((event: FocusOutsideEvent) => void) | undefined | — | Event handler called when the focus moves outside of the `HoverCard`. Can be prevented. |
onInteractOutside?inherited | ((event: PointerDownOutsideEvent | FocusOutsideEvent) => void) | undefined | — | Event handler called when an interaction happens outside the `HoverCard`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented. |
onPointerDownOutside?inherited | ((event: PointerDownOutsideEvent) => void) | undefined | — | Event handler called when the a `pointerdown` event happens outside of the `HoverCard`. Can be prevented. |
side?inherited | "top" | "right" | "bottom" | "left" | undefined | — | |
sideOffset?inherited | number | undefined | — | |
sticky?inherited | "partial" | "always" | undefined | — | |
updatePositionStrategy?inherited | "always" | "optimized" | undefined | — | |
width? | "sm" | "md" | "lg" | undefined | — |
HoverCardPortal props
Type: HoverCardPortalProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
children?inherited | ReactNode | — | |
container?inherited | Element | DocumentFragment | null | undefined | — | Specify a container element to portal the content into. |
forceMount?inherited | true | undefined | — | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
HoverCardTrigger props
Type: HoverCardTriggerProps & RefAttributes<HTMLAnchorElement>
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
asChild?inherited | boolean | undefined | — |
Guidelines
Do
- Use it for a preview of what a link leads to — a person, a document, a definition — where the reader may continue without following it.
- Keep the trigger focusable: the card opens on focus as well as hover, which is what makes it usable from the keyboard.
Don't
- Use it for essential information or for anything interactive the reader must reach; the card has no dismissal lifecycle of its own.
Accessibility
The trigger is a link or button, so it is reachable in reading order; opening the card does not move focus, and the card's content is read in place rather than being a modal.
What happens on the server, and when hydration changes it.
Family
Overlays
Content that leaves the flow, or reveals itself in place — and the focus contract that has to come with it.
10 documented entries in this family. Open the family index
Related