# Hover Card

URL: https://ark-ui.com/docs/components/hover-card
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/hover-card.mdx

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: basic**

```ripple
import { HoverCard } from 'ark-ripple/hover-card';
import { Portal } from 'ark-ripple/portal';
import styles from 'styles/hover-card.module.css';

export component Basic() {
  <HoverCard.Root>
    <p>
      {'Liked by '}
      <HoverCard.Trigger class={styles.Trigger}>
        component asChild({ propsFn }) {
          <a {...propsFn({ href: '#profile' })}>{'@sarah_chen'}</a>
        }
      </HoverCard.Trigger>
      {' and 3 others'}
    </p>
    <Portal>
      <HoverCard.Positioner>
        <HoverCard.Content class={styles.Content}>
          <HoverCard.Arrow class={styles.Arrow}>
            <HoverCard.ArrowTip class={styles.ArrowTip} />
          </HoverCard.Arrow>
          <div class={styles.Body}>
            <div class={styles.Header}>
              <img class={styles.Avatar} src="https://i.pravatar.cc/300?u=sarah" alt="Sarah Chen" />
              <button type="button" class={styles.FollowButton}>{'Follow'}</button>
            </div>
            <div>
              <p class={styles.Name}>{'Sarah Chen'}</p>
              <p class={styles.Username}>{'@sarah_chen'}</p>
            </div>
            <p class={styles.Bio}>
              {'Design Engineer at Acme Inc. Building beautiful interfaces and design systems.'}
            </p>
            <div class={styles.Stats}>
              <div class={styles.Stat}>
                <span class={styles.StatValue}>{'2,456'}</span>
                <span class={styles.StatLabel}>{'Following'}</span>
              </div>
              <div class={styles.Stat}>
                <span class={styles.StatValue}>{'14.5K'}</span>
                <span class={styles.StatLabel}>{'Followers'}</span>
              </div>
            </div>
          </div>
        </HoverCard.Content>
      </HoverCard.Positioner>
    </Portal>
  </HoverCard.Root>
}

```

### Controlled

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

**Example: controlled**

```ripple
import { HoverCard } from 'ark-ripple/hover-card';
import { Portal } from 'ark-ripple/portal';
import { track } from 'ripple';
import button from 'styles/button.module.css';
import styles from 'styles/hover-card.module.css';

export component Controlled() {
  let open = track(false);

  <div class="stack">
    <button
      type="button"
      class={button.Root}
      onClick={() => {
        @open = !@open;
      }}
    >
      {'Toggle'}
    </button>
    <HoverCard.Root
      {open}
      onOpenChange={(e) => {
        @open = e.open;
      }}
    >
      <p>
        {'Liked by '}
        <HoverCard.Trigger class={styles.Trigger}>
          component asChild({ propsFn }) {
            <a {...propsFn({ href: '#profile' })}>{'@sarah_chen'}</a>
          }
        </HoverCard.Trigger>
        {' and 3 others'}
      </p>
      <Portal>
        <HoverCard.Positioner>
          <HoverCard.Content class={styles.Content}>
            <HoverCard.Arrow class={styles.Arrow}>
              <HoverCard.ArrowTip class={styles.ArrowTip} />
            </HoverCard.Arrow>
            <div class={styles.Body}>
              <img class={styles.Avatar} src="https://i.pravatar.cc/300?u=sarah" alt="Sarah Chen" />
              <div>
                <p class={styles.Name}>{'Sarah Chen'}</p>
                <p class={styles.Username}>{'@sarah_chen'}</p>
              </div>
              <p class={styles.Bio}>{'Design Engineer at Acme Inc.'}</p>
            </div>
          </HoverCard.Content>
        </HoverCard.Positioner>
      </Portal>
    </HoverCard.Root>
  </div>
}

```

### 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: root-provider**

```ripple
import { HoverCard, useHoverCard } from 'ark-ripple/hover-card';
import { Portal } from 'ark-ripple/portal';
import styles from 'styles/hover-card.module.css';

export component RootProvider() {
  const hoverCard = useHoverCard();

  <div class="stack">
    <output>
      {'Open: '}
      {String(@hoverCard.open)}
    </output>
    <HoverCard.RootProvider value={hoverCard}>
      <p>
        {'Liked by '}
        <HoverCard.Trigger class={styles.Trigger}>
          component asChild({ propsFn }) {
            <a {...propsFn({ href: '#profile' })}>{'@sarah_chen'}</a>
          }
        </HoverCard.Trigger>
        {' and 3 others'}
      </p>
      <Portal>
        <HoverCard.Positioner>
          <HoverCard.Content class={styles.Content}>
            <HoverCard.Arrow class={styles.Arrow}>
              <HoverCard.ArrowTip class={styles.ArrowTip} />
            </HoverCard.Arrow>
            <div class={styles.Body}>
              <img class={styles.Avatar} src="https://i.pravatar.cc/300?u=sarah" alt="Sarah Chen" />
              <div>
                <p class={styles.Name}>{'Sarah Chen'}</p>
                <p class={styles.Username}>{'@sarah_chen'}</p>
              </div>
              <p class={styles.Bio}>{'Design Engineer at Acme Inc.'}</p>
            </div>
          </HoverCard.Content>
        </HoverCard.Positioner>
      </Portal>
    </HoverCard.RootProvider>
  </div>
}

```

### Delay

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

**Example: delay**

```ripple
import { HoverCard } from 'ark-ripple/hover-card';
import { Portal } from 'ark-ripple/portal';
import styles from 'styles/hover-card.module.css';

export component Delay() {
  <HoverCard.Root openDelay={200} closeDelay={500}>
    <p>
      {'Liked by '}
      <HoverCard.Trigger class={styles.Trigger}>
        component asChild({ propsFn }) {
          <a {...propsFn({ href: '#profile' })}>{'@sarah_chen'}</a>
        }
      </HoverCard.Trigger>
      {' and 3 others'}
    </p>
    <Portal>
      <HoverCard.Positioner>
        <HoverCard.Content class={styles.Content}>
          <HoverCard.Arrow class={styles.Arrow}>
            <HoverCard.ArrowTip class={styles.ArrowTip} />
          </HoverCard.Arrow>
          <div class={styles.Body}>
            <img class={styles.Avatar} src="https://i.pravatar.cc/300?u=sarah" alt="Sarah Chen" />
            <div>
              <p class={styles.Name}>{'Sarah Chen'}</p>
              <p class={styles.Username}>{'@sarah_chen'}</p>
            </div>
            <p class={styles.Bio}>{'Design Engineer at Acme Inc.'}</p>
          </div>
        </HoverCard.Content>
      </HoverCard.Positioner>
    </Portal>
  </HoverCard.Root>
}

```

### Positioning

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

**Example: positioning**

```ripple
import { HoverCard } from 'ark-ripple/hover-card';
import { Portal } from 'ark-ripple/portal';
import styles from 'styles/hover-card.module.css';

export component Positioning() {
  <HoverCard.Root positioning={{ placement: 'right', gutter: 12 }}>
    <p>
      {'Liked by '}
      <HoverCard.Trigger class={styles.Trigger}>
        component asChild({ propsFn }) {
          <a {...propsFn({ href: '#profile' })}>{'@sarah_chen'}</a>
        }
      </HoverCard.Trigger>
      {' and 3 others'}
    </p>
    <Portal>
      <HoverCard.Positioner>
        <HoverCard.Content class={styles.Content}>
          <HoverCard.Arrow class={styles.Arrow}>
            <HoverCard.ArrowTip class={styles.ArrowTip} />
          </HoverCard.Arrow>
          <div class={styles.Body}>
            <img class={styles.Avatar} src="https://i.pravatar.cc/300?u=sarah" alt="Sarah Chen" />
            <div>
              <p class={styles.Name}>{'Sarah Chen'}</p>
              <p class={styles.Username}>{'@sarah_chen'}</p>
            </div>
            <p class={styles.Bio}>{'Design Engineer at Acme Inc.'}</p>
          </div>
        </HoverCard.Content>
      </HoverCard.Positioner>
    </Portal>
  </HoverCard.Root>
}

```

### Context

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

**Example: context**

```ripple
import { HoverCard } from 'ark-ripple/hover-card';
import { Portal } from 'ark-ripple/portal';
import { ChevronDown, ChevronUp } from 'lucide-ripple';
import styles from 'styles/hover-card.module.css';

export component Context() {
  const s = 'www';
  <HoverCard.Root>
    <HoverCard.Context>
      <p>
        {'Liked by '}
        <HoverCard.Trigger class={styles.Trigger}>
          component asChild({ propsFn }) {
            <a {...propsFn({ href: '#profile' })}>
              {'@sarah_chen '}
              <HoverCard.Context>
                component children({ context }) {
                  {s}
                  if (@context.open) {
                    <ChevronUp />
                  } else {
                    <ChevronDown />
                  }
                }
              </HoverCard.Context>
            </a>
          }
        </HoverCard.Trigger>
        {' and 3 others'}
      </p>
    </HoverCard.Context>
    <Portal>
      <HoverCard.Positioner>
        <HoverCard.Content class={styles.Content}>
          <HoverCard.Arrow class={styles.Arrow}>
            <HoverCard.ArrowTip class={styles.ArrowTip} />
          </HoverCard.Arrow>
          <div class={styles.Body}>
            <img class={styles.Avatar} src="https://i.pravatar.cc/300?u=sarah" alt="Sarah Chen" />
            <div>
              <p class={styles.Name}>{'Sarah Chen'}</p>
              <p class={styles.Username}>{'@sarah_chen'}</p>
            </div>
            <p class={styles.Bio}>{'Design Engineer at Acme Inc.'}</p>
          </div>
        </HoverCard.Content>
      </HoverCard.Positioner>
    </Portal>
  </HoverCard.Root>
}

```

## API Reference

### Props

**Component API Reference**

**Root Props:**

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


**Arrow Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Arrow CSS Variables:**

| 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 Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Data Attributes:**

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


**Content CSS Variables:**

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


**Positioner Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Positioner CSS Variables:**

| 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 Props:**

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


**Trigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Trigger Data Attributes:**

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


### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `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 |