Hover Card
The Hover Card component allows users to preview content behind a link, offering a quick glimpse of the material without navigating away from the current page. It enhances navigation and user experience by providing immediate context and reducing the need for extra clicks.
Configurable Props
<HoverCard>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
defaultOpen | boolean | The open state of the hover card when it is initially rendered. Use when you do not need to control its open state. | |
open | boolean | The controlled open state of the hover card. Must be used in conjunction with onOpenChange. | |
onOpenChange | function (checked: boolean | 'indeterminate') => void | Event handler called when the open state of the hover card changes. | |
openDelay | number | 700 | The duration from when the mouse enters the trigger until the hover card opens. |
closeDelay | number | 300 | The duration from when the mouse leaves the trigger or content until the hover card closes. |
<HoverCardTrigger>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
<HoverCardContent>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
side | enum ("top" | "right" | "bottom" | "left") | "bottom" | The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled. |
sideOffset | number | 0 | The distance in pixels from the trigger. |
align | enum ("start" | "center" | "end") | "center" | The preferred alignment against the trigger. May change when collisions occur. |
alignOffset | number | 0 | An offset in pixels from the "start" or "end" alignment options. |
avoidCollisions | boolean | true | When true, overrides the side andalign preferences to prevent collisions with boundary edges. |
collisionBoundary | Boundary | [] | The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check. |
collisionPadding | number | 0 | The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object. |
sticky | enum ("partial" | "always") | "partial" | The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. |