Hover Card

A card that appears when a user hovers over an element.

Anatomy

To set up the hover card correctly, you'll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Learn how to use the HoverCard component in your project. Let's take a look at the most basic example:

Example not found

Example not found

Example not found

Example not found

The controlled HoverCard component provides an interface for managing the state of the hover card using the open and onOpenChange props:

Example not found

Example not found

Example not found

Example not found

Custom Positioning

The HoverCard component can be customized in its placement and distance from the trigger element through the positioning prop:

Example not found

Example not found

Example not found

Example not found

Render Prop Usage

The HoverCard component can also accept a render prop, giving the user more control over rendering behavior. This is useful for dynamically updating the trigger based on the state of the HoverCard:

Example not found

Example not found

Example not found

Example not found

Using the Root Provider

The RootProvider component provides a context for the hover-card. It accepts the value of the useHover-card hook. You can leverage it to access the component state and methods from outside the hover-card.

Example not found

Example not found

Example not found

Example not found

If you're using the RootProvider component, you don't need to use the Root component.

API Reference

Props

Root

Prop	Default	Type
`closeDelay`	`300`	`number` The duration from when the mouse leaves the trigger or content until the hover card closes.
`defaultOpen`		`boolean` The initial open state of the hover card when rendered. Use when you don't need to control the open state of the hover card.
`disabled`		`boolean` Whether the hover card is disabled
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ trigger: string; content: string; positioner: string; arrow: string }>` The ids of the elements in the popover. Useful for composition.
`immediate`		`boolean` Whether to synchronize the present change immediately or defer it to the next frame
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`onExitComplete`		`VoidFunction` Function called when the animation ends in the closed state
`onFocusOutside`		`(event: FocusOutsideEvent) => void` Function called when the focus is moved outside the component
`onInteractOutside`		`(event: InteractOutsideEvent) => void` Function called when an interaction happens outside the component
`onOpenChange`		`(details: OpenChangeDetails) => void` Function called when the hover card opens or closes.
`onPointerDownOutside`		`(event: PointerDownOutsideEvent) => void` Function called when the pointer is pressed down outside the component
`open`		`boolean` The controlled open state of the hover card
`openDelay`	`600`	`number` The duration from when the mouse enters the trigger until the hover card opens.
`positioning`		`PositioningOptions` The user provided options used to position the popover content
`present`		`boolean` Whether the node is present (controlled by the user)
`skipAnimationOnMount`	`false`	`boolean` Whether to allow the initial presence animation.
`unmountOnExit`	`false`	`boolean` Whether to unmount on exit.

Arrow

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

CSS Variable	Description
`--arrow-size`	The size of the arrow
`--arrow-size-half`	Half the size of the arrow
`--arrow-background`	Use this variable to style the arrow background
`--arrow-offset`	The offset position of the arrow

ArrowTip

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Content

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

CSS Variable	Description
`--layer-index`	The index of the dismissable in the layer stack
`--nested-layer-count`	The number of nested hover-cards

Data Attribute	Value
`[data-scope]`	hover-card
`[data-part]`	content
`[data-state]`	"open" \| "closed"
`[data-nested]`	popover
`[data-has-nested]`	popover
`[data-placement]`	The placement of the content

Positioner

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

CSS Variable	Description
`--reference-width`	The width of the reference element
`--reference-height`	The height of the root
`--available-width`	The available width in viewport
`--available-height`	The available height in viewport
`--x`	The x position for transform
`--y`	The y position for transform
`--z-index`	The z-index value
`--transform-origin`	The transform origin for animations

RootProvider

Prop	Default	Type
`value`		`UseHoverCardReturn`
`immediate`		`boolean` Whether to synchronize the present change immediately or defer it to the next frame
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`onExitComplete`		`VoidFunction` Function called when the animation ends in the closed state
`present`		`boolean` Whether the node is present (controlled by the user)
`skipAnimationOnMount`	`false`	`boolean` Whether to allow the initial presence animation.
`unmountOnExit`	`false`	`boolean` Whether to unmount on exit.

Trigger

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Data Attribute	Value
`[data-scope]`	hover-card
`[data-part]`	trigger
`[data-placement]`	The placement of the trigger
`[data-state]`	"open" \| "closed"

Context

These are the properties available when using UhoverUcard.Context, useUhoverUcardContext hook or useUhoverUcard hook.

API

Property	Type
`open`	`boolean` Whether the hover card is open
`setOpen`	`(open: boolean) => void` Function to open the hover card
`reposition`	`(options?: Partial<PositioningOptions>) => void` Function to reposition the popover