Hover Card

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

Anatomy

<HoverCard.Root>
  <HoverCard.Trigger />
  <HoverCard.Positioner>
    <HoverCard.Arrow>
      <HoverCard.ArrowTip />
    </HoverCard.Arrow>
    <HoverCard.Content />
  </HoverCard.Positioner>
</HoverCard.Root>

Examples

Controlled

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

Root Provider

An alternative way to control the hover card is to use the RootProvider component and the useHoverCard hook. This way you can access the state and methods from outside the component.

Delay

Control the open and close delay of the hover card using the openDelay and closeDelay props:

Positioning

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

Context

Use the Context component to access the hover card's state and methods from within the component tree:

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

Renders a <div> element.

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

Renders a <div> element.

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

Renders a <div> element.

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.

Attribute	Description
`[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

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

Positioner

Renders a <div> element.

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

Renders a <button> element.

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.

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

Context

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