---
id: hover-card
title: Hover Card
description: A card that appears when a user hovers over an element.
---

<ComponentPreview id="HoverCard" />

## Anatomy

<Anatomy id="hover-card" />

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

## Examples

<Example id="basic" />

### Controlled

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

<Example id="controlled" />

### 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.

<Example id="root-provider" />

### Delay

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

<Example id="delay" />

### Positioning

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

<Example id="positioning" />

### Context

Access the hover card's state with `HoverCard.Context` or the `useHoverCardContext` hook:

<Example id="context" />

### Multiple Triggers

Share a single hover card across multiple trigger elements. Pass a `value` to each `HoverCard.Trigger` — the card
repositions to the active trigger without closing.

<Example id="multiple-triggers" />

## API Reference

### Props

<ComponentTypes id="hover-card" />

### Context

<ContextType id="hover-card" />
