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

#### React

```tsx
import { HoverCard } from '@ark-ui/react/hover-card'
import { Portal } from '@ark-ui/react/portal'
import styles from 'styles/hover-card.module.css'

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

```

#### Solid

```tsx
import { HoverCard } from '@ark-ui/solid/hover-card'
import { Portal } from 'solid-js/web'
import styles from 'styles/hover-card.module.css'

export const Basic = () => (
  <HoverCard.Root>
    <p>
      Liked by{' '}
      <HoverCard.Trigger
        class={styles.Trigger}
        asChild={(props) => (
          <a href="#profile" {...props()}>
            @sarah_chen
          </a>
        )}
      />{' '}
      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>
)

```

#### Vue

```vue
<script setup lang="ts">
import { HoverCard } from '@ark-ui/vue/hover-card'
import styles from 'styles/hover-card.module.css'
</script>

<template>
  <HoverCard.Root>
    <p>
      Liked by
      <HoverCard.Trigger :class="styles.Trigger" as-child>
        <a href="#profile">@sarah_chen</a>
      </HoverCard.Trigger>
      and 3 others
    </p>
    <Teleport to="body">
      <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>
    </Teleport>
  </HoverCard.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { HoverCard } from '@ark-ui/svelte/hover-card'
  import { Portal } from '@ark-ui/svelte/portal'
  import styles from 'styles/hover-card.module.css'
</script>

<HoverCard.Root>
  <p>
    Liked by
    <HoverCard.Trigger class={styles.Trigger}>
      {#snippet asChild(props)}
        <a href="#profile" {...props()}>@sarah_chen</a>
      {/snippet}
    </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**

#### React

```tsx
import { HoverCard } from '@ark-ui/react/hover-card'
import { Portal } from '@ark-ui/react/portal'
import { useState } from 'react'
import button from 'styles/button.module.css'
import styles from 'styles/hover-card.module.css'

export const Controlled = () => {
  const [open, setOpen] = useState(false)

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

```

#### Solid

```tsx
import { HoverCard } from '@ark-ui/solid/hover-card'
import { createSignal } from 'solid-js'
import { Portal } from 'solid-js/web'
import button from 'styles/button.module.css'
import styles from 'styles/hover-card.module.css'

export const Controlled = () => {
  const [open, setOpen] = createSignal(false)

  return (
    <div class="stack">
      <button type="button" class={button.Root} onClick={() => setOpen(!open())}>
        Toggle
      </button>
      <HoverCard.Root open={open()} onOpenChange={(e) => setOpen(e.open)}>
        <p>
          Liked by{' '}
          <HoverCard.Trigger
            class={styles.Trigger}
            asChild={(props) => (
              <a href="#profile" {...props()}>
                @sarah_chen
              </a>
            )}
          />{' '}
          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>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { HoverCard } from '@ark-ui/vue/hover-card'
import { ref } from 'vue'
import button from 'styles/button.module.css'
import styles from 'styles/hover-card.module.css'

const open = ref(false)
</script>

<template>
  <div class="stack">
    <button type="button" :class="button.Root" @click="open = !open">Toggle</button>
    <HoverCard.Root v-model:open="open">
      <p>
        Liked by
        <HoverCard.Trigger :class="styles.Trigger" as-child>
          <a href="#profile">@sarah_chen</a>
        </HoverCard.Trigger>
        and 3 others
      </p>
      <Teleport to="body">
        <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>
      </Teleport>
    </HoverCard.Root>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { HoverCard } from '@ark-ui/svelte/hover-card'
  import { Portal } from '@ark-ui/svelte/portal'
  import button from 'styles/button.module.css'
  import styles from 'styles/hover-card.module.css'

  let open = $state(false)
</script>

<div class="stack">
  <button type="button" class={button.Root} onclick={() => (open = !open)}>Toggle</button>
  <HoverCard.Root bind:open>
    <p>
      Liked by
      <HoverCard.Trigger class={styles.Trigger}>
        {#snippet asChild(props)}
          <a href="#profile" {...props()}>@sarah_chen</a>
        {/snippet}
      </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**

#### React

```tsx
import { HoverCard, useHoverCard } from '@ark-ui/react/hover-card'
import { Portal } from '@ark-ui/react/portal'
import styles from 'styles/hover-card.module.css'

export const RootProvider = () => {
  const hoverCard = useHoverCard()

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

```

#### Solid

```tsx
import { HoverCard, useHoverCard } from '@ark-ui/solid/hover-card'
import { Portal } from 'solid-js/web'
import styles from 'styles/hover-card.module.css'

export const RootProvider = () => {
  const hoverCard = useHoverCard()

  return (
    <div class="stack">
      <output>Open: {String(hoverCard().open)}</output>
      <HoverCard.RootProvider value={hoverCard}>
        <p>
          Liked by{' '}
          <HoverCard.Trigger
            class={styles.Trigger}
            asChild={(props) => (
              <a href="#profile" {...props()}>
                @sarah_chen
              </a>
            )}
          />{' '}
          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>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { HoverCard, useHoverCard } from '@ark-ui/vue/hover-card'
import styles from 'styles/hover-card.module.css'

const hoverCard = useHoverCard()
</script>

<template>
  <div class="stack">
    <output>Open: {{ String(hoverCard.open) }}</output>
    <HoverCard.RootProvider :value="hoverCard">
      <p>
        Liked by
        <HoverCard.Trigger :class="styles.Trigger" as-child>
          <a href="#profile">@sarah_chen</a>
        </HoverCard.Trigger>
        and 3 others
      </p>
      <Teleport to="body">
        <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>
      </Teleport>
    </HoverCard.RootProvider>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { HoverCard, useHoverCard } from '@ark-ui/svelte/hover-card'
  import { Portal } from '@ark-ui/svelte/portal'
  import styles from 'styles/hover-card.module.css'

  const id = $props.id()
  const hoverCard = useHoverCard({ id })
</script>

<div class="stack">
  <output>Open: {String(hoverCard().open)}</output>
  <HoverCard.RootProvider value={hoverCard}>
    <p>
      Liked by
      <HoverCard.Trigger class={styles.Trigger}>
        {#snippet asChild(props)}
          <a href="#profile" {...props()}>@sarah_chen</a>
        {/snippet}
      </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**

#### React

```tsx
import { HoverCard } from '@ark-ui/react/hover-card'
import { Portal } from '@ark-ui/react/portal'
import styles from 'styles/hover-card.module.css'

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

```

#### Solid

```tsx
import { HoverCard } from '@ark-ui/solid/hover-card'
import { Portal } from 'solid-js/web'
import styles from 'styles/hover-card.module.css'

export const Delay = () => (
  <HoverCard.Root openDelay={200} closeDelay={500}>
    <p>
      Liked by{' '}
      <HoverCard.Trigger
        class={styles.Trigger}
        asChild={(props) => (
          <a href="#profile" {...props()}>
            @sarah_chen
          </a>
        )}
      />{' '}
      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>
)

```

#### Vue

```vue
<script setup lang="ts">
import { HoverCard } from '@ark-ui/vue/hover-card'
import styles from 'styles/hover-card.module.css'
</script>

<template>
  <HoverCard.Root :open-delay="200" :close-delay="500">
    <p>
      Liked by
      <HoverCard.Trigger :class="styles.Trigger" as-child>
        <a href="#profile">@sarah_chen</a>
      </HoverCard.Trigger>
      and 3 others
    </p>
    <Teleport to="body">
      <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>
    </Teleport>
  </HoverCard.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { HoverCard } from '@ark-ui/svelte/hover-card'
  import { Portal } from '@ark-ui/svelte/portal'
  import styles from 'styles/hover-card.module.css'
</script>

<HoverCard.Root openDelay={200} closeDelay={500}>
  <p>
    Liked by
    <HoverCard.Trigger class={styles.Trigger}>
      {#snippet asChild(props)}
        <a href="#profile" {...props()}>@sarah_chen</a>
      {/snippet}
    </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**

#### React

```tsx
import { HoverCard } from '@ark-ui/react/hover-card'
import { Portal } from '@ark-ui/react/portal'
import styles from 'styles/hover-card.module.css'

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

```

#### Solid

```tsx
import { HoverCard } from '@ark-ui/solid/hover-card'
import { Portal } from 'solid-js/web'
import styles from 'styles/hover-card.module.css'

export const Positioning = () => (
  <HoverCard.Root positioning={{ placement: 'right', gutter: 12 }}>
    <p>
      Liked by{' '}
      <HoverCard.Trigger
        class={styles.Trigger}
        asChild={(props) => (
          <a href="#profile" {...props()}>
            @sarah_chen
          </a>
        )}
      />{' '}
      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>
)

```

#### Vue

```vue
<script setup lang="ts">
import { HoverCard } from '@ark-ui/vue/hover-card'
import styles from 'styles/hover-card.module.css'
</script>

<template>
  <HoverCard.Root :positioning="{ placement: 'right', gutter: 12 }">
    <p>
      Liked by
      <HoverCard.Trigger :class="styles.Trigger" as-child>
        <a href="#profile">@sarah_chen</a>
      </HoverCard.Trigger>
      and 3 others
    </p>
    <Teleport to="body">
      <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>
    </Teleport>
  </HoverCard.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { HoverCard } from '@ark-ui/svelte/hover-card'
  import { Portal } from '@ark-ui/svelte/portal'
  import styles from 'styles/hover-card.module.css'
</script>

<HoverCard.Root positioning={{ placement: 'right', gutter: 12 }}>
  <p>
    Liked by
    <HoverCard.Trigger class={styles.Trigger}>
      {#snippet asChild(props)}
        <a href="#profile" {...props()}>@sarah_chen</a>
      {/snippet}
    </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**

#### React

```tsx
import { HoverCard } from '@ark-ui/react/hover-card'
import { Portal } from '@ark-ui/react/portal'
import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
import styles from 'styles/hover-card.module.css'

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

```

#### Solid

```tsx
import { HoverCard } from '@ark-ui/solid/hover-card'
import { ChevronDownIcon, ChevronUpIcon } from 'lucide-solid'
import { Portal } from 'solid-js/web'
import styles from 'styles/hover-card.module.css'

export const Context = () => (
  <HoverCard.Root>
    <HoverCard.Context>
      {(context) => (
        <p>
          Liked by{' '}
          <HoverCard.Trigger
            class={styles.Trigger}
            asChild={(props) => (
              <a href="#profile" {...props()}>
                @sarah_chen {context().open ? <ChevronUpIcon /> : <ChevronDownIcon />}
              </a>
            )}
          />{' '}
          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>
)

```

#### Vue

```vue
<script setup lang="ts">
import { HoverCard } from '@ark-ui/vue/hover-card'
import { ChevronDownIcon, ChevronUpIcon } from 'lucide-vue-next'
import styles from 'styles/hover-card.module.css'
</script>

<template>
  <HoverCard.Root>
    <HoverCard.Context v-slot="context">
      <p>
        Liked by
        <HoverCard.Trigger :class="styles.Trigger" as-child>
          <a href="#profile">
            @sarah_chen
            <ChevronUpIcon v-if="context.open" />
            <ChevronDownIcon v-else />
          </a>
        </HoverCard.Trigger>
        and 3 others
      </p>
    </HoverCard.Context>
    <Teleport to="body">
      <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>
    </Teleport>
  </HoverCard.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { HoverCard } from '@ark-ui/svelte/hover-card'
  import { Portal } from '@ark-ui/svelte/portal'
  import ChevronDownIcon from 'lucide-svelte/icons/chevron-down'
  import ChevronUpIcon from 'lucide-svelte/icons/chevron-up'
  import styles from 'styles/hover-card.module.css'
</script>

<HoverCard.Root>
  <HoverCard.Context>
    {#snippet render(context)}
      <p>
        Liked by
        <HoverCard.Trigger class={styles.Trigger}>
          {#snippet asChild(props)}
            <a href="#profile" {...props()}>
              @sarah_chen
              {#if context().open}
                <ChevronUpIcon />
              {:else}
                <ChevronDownIcon />
              {/if}
            </a>
          {/snippet}
        </HoverCard.Trigger>
        and 3 others
      </p>
    {/snippet}
  </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>

```

### 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: multiple-triggers**

#### React

```tsx
import { HoverCard } from '@ark-ui/react/hover-card'
import { Portal } from '@ark-ui/react/portal'
import { useState } from 'react'
import styles from 'styles/hover-card.module.css'

interface Profile {
  id: string
  name: string
  username: string
  avatar: string
  bio: string
}

const profiles: Profile[] = [
  {
    id: 'sarah',
    name: 'Sarah Chen',
    username: '@sarah_chen',
    avatar: 'https://i.pravatar.cc/300?u=sarah',
    bio: 'Design Engineer at Acme Inc. Building beautiful interfaces.',
  },
  {
    id: 'alex',
    name: 'Alex Rivera',
    username: '@alex_r',
    avatar: 'https://i.pravatar.cc/300?u=alex',
    bio: 'Full-stack developer and open source contributor.',
  },
  {
    id: 'jordan',
    name: 'Jordan Lee',
    username: '@jordan_lee',
    avatar: 'https://i.pravatar.cc/300?u=jordan',
    bio: 'DevOps lead. Automating all the things.',
  },
]

export const MultipleTriggers = () => {
  const [activeProfile, setActiveProfile] = useState<Profile | null>(null)

  return (
    <HoverCard.Root
      onTriggerValueChange={(e) => {
        setActiveProfile(profiles.find((p) => p.id === e.value) ?? null)
      }}
    >
      <p className={styles.Paragraph}>
        Reviewed by{' '}
        <HoverCard.Trigger value="sarah" asChild>
          <a href="#" className={styles.Trigger}>
            @sarah_chen
          </a>
        </HoverCard.Trigger>
        ,{' '}
        <HoverCard.Trigger value="alex" asChild>
          <a href="#" className={styles.Trigger}>
            @alex_r
          </a>
        </HoverCard.Trigger>
        , and{' '}
        <HoverCard.Trigger value="jordan" asChild>
          <a href="#" className={styles.Trigger}>
            @jordan_lee
          </a>
        </HoverCard.Trigger>
      </p>
      <Portal>
        <HoverCard.Positioner>
          <HoverCard.Content className={styles.Content}>
            <HoverCard.Arrow className={styles.Arrow}>
              <HoverCard.ArrowTip className={styles.ArrowTip} />
            </HoverCard.Arrow>
            {activeProfile && (
              <div className={styles.Body}>
                <div className={styles.Header}>
                  <img className={styles.Avatar} src={activeProfile.avatar} alt={activeProfile.name} />
                </div>
                <div>
                  <p className={styles.Name}>{activeProfile.name}</p>
                  <p className={styles.Username}>{activeProfile.username}</p>
                </div>
                <p className={styles.Bio}>{activeProfile.bio}</p>
              </div>
            )}
          </HoverCard.Content>
        </HoverCard.Positioner>
      </Portal>
    </HoverCard.Root>
  )
}

```

#### Solid

```tsx
import { HoverCard } from '@ark-ui/solid/hover-card'
import { Portal } from 'solid-js/web'
import { Show, createSignal } from 'solid-js'
import styles from 'styles/hover-card.module.css'

interface Profile {
  id: string
  name: string
  username: string
  avatar: string
  bio: string
}

const profiles: Profile[] = [
  {
    id: 'sarah',
    name: 'Sarah Chen',
    username: '@sarah_chen',
    avatar: 'https://i.pravatar.cc/300?u=sarah',
    bio: 'Design Engineer at Acme Inc. Building beautiful interfaces.',
  },
  {
    id: 'alex',
    name: 'Alex Rivera',
    username: '@alex_r',
    avatar: 'https://i.pravatar.cc/300?u=alex',
    bio: 'Full-stack developer and open source contributor.',
  },
  {
    id: 'jordan',
    name: 'Jordan Lee',
    username: '@jordan_lee',
    avatar: 'https://i.pravatar.cc/300?u=jordan',
    bio: 'DevOps lead. Automating all the things.',
  },
]

export const MultipleTriggers = () => {
  const [activeProfile, setActiveProfile] = createSignal<Profile | null>(null)

  return (
    <HoverCard.Root
      onTriggerValueChange={(e) => {
        setActiveProfile(profiles.find((p) => p.id === e.value) ?? null)
      }}
    >
      <p class={styles.Paragraph}>
        Reviewed by{' '}
        <HoverCard.Trigger
          value="sarah"
          asChild={(props) => (
            <a href="#" class={styles.Trigger} {...props()}>
              @sarah_chen
            </a>
          )}
        />
        ,{' '}
        <HoverCard.Trigger
          value="alex"
          asChild={(props) => (
            <a href="#" class={styles.Trigger} {...props()}>
              @alex_r
            </a>
          )}
        />
        , and{' '}
        <HoverCard.Trigger
          value="jordan"
          asChild={(props) => (
            <a href="#" class={styles.Trigger} {...props()}>
              @jordan_lee
            </a>
          )}
        />
      </p>
      <Portal>
        <HoverCard.Positioner>
          <HoverCard.Content class={styles.Content}>
            <HoverCard.Arrow class={styles.Arrow}>
              <HoverCard.ArrowTip class={styles.ArrowTip} />
            </HoverCard.Arrow>
            <Show when={activeProfile()}>
              {(profile) => (
                <div class={styles.Body}>
                  <div class={styles.Header}>
                    <img class={styles.Avatar} src={profile().avatar} alt={profile().name} />
                  </div>
                  <div>
                    <p class={styles.Name}>{profile().name}</p>
                    <p class={styles.Username}>{profile().username}</p>
                  </div>
                  <p class={styles.Bio}>{profile().bio}</p>
                </div>
              )}
            </Show>
          </HoverCard.Content>
        </HoverCard.Positioner>
      </Portal>
    </HoverCard.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { HoverCard } from '@ark-ui/vue/hover-card'
import { ref } from 'vue'
import styles from 'styles/hover-card.module.css'

interface Profile {
  id: string
  name: string
  username: string
  avatar: string
  bio: string
}

const profiles: Profile[] = [
  {
    id: 'sarah',
    name: 'Sarah Chen',
    username: '@sarah_chen',
    avatar: 'https://i.pravatar.cc/300?u=sarah',
    bio: 'Design Engineer at Acme Inc. Building beautiful interfaces.',
  },
  {
    id: 'alex',
    name: 'Alex Rivera',
    username: '@alex_r',
    avatar: 'https://i.pravatar.cc/300?u=alex',
    bio: 'Full-stack developer and open source contributor.',
  },
  {
    id: 'jordan',
    name: 'Jordan Lee',
    username: '@jordan_lee',
    avatar: 'https://i.pravatar.cc/300?u=jordan',
    bio: 'DevOps lead. Automating all the things.',
  },
]

const activeProfile = ref<Profile | null>(null)
</script>

<template>
  <HoverCard.Root @trigger-value-change="(e) => (activeProfile = profiles.find((p) => p.id === e.value) ?? null)">
    <p :class="styles.Paragraph">
      Reviewed by
      <HoverCard.Trigger value="sarah" as-child>
        <a href="#" :class="styles.Trigger">@sarah_chen</a>
      </HoverCard.Trigger>
      ,
      <HoverCard.Trigger value="alex" as-child>
        <a href="#" :class="styles.Trigger">@alex_r</a>
      </HoverCard.Trigger>
      , and
      <HoverCard.Trigger value="jordan" as-child>
        <a href="#" :class="styles.Trigger">@jordan_lee</a>
      </HoverCard.Trigger>
    </p>
    <Teleport to="body">
      <HoverCard.Positioner>
        <HoverCard.Content :class="styles.Content">
          <HoverCard.Arrow :class="styles.Arrow">
            <HoverCard.ArrowTip :class="styles.ArrowTip" />
          </HoverCard.Arrow>
          <div v-if="activeProfile" :class="styles.Body">
            <div :class="styles.Header">
              <img :class="styles.Avatar" :src="activeProfile.avatar" :alt="activeProfile.name" />
            </div>
            <div>
              <p :class="styles.Name">{{ activeProfile.name }}</p>
              <p :class="styles.Username">{{ activeProfile.username }}</p>
            </div>
            <p :class="styles.Bio">{{ activeProfile.bio }}</p>
          </div>
        </HoverCard.Content>
      </HoverCard.Positioner>
    </Teleport>
  </HoverCard.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { HoverCard } from '@ark-ui/svelte/hover-card'
  import { Portal } from '@ark-ui/svelte/portal'
  import styles from 'styles/hover-card.module.css'

  interface Profile {
    id: string
    name: string
    username: string
    avatar: string
    bio: string
  }

  const profiles: Profile[] = [
    {
      id: 'sarah',
      name: 'Sarah Chen',
      username: '@sarah_chen',
      avatar: 'https://i.pravatar.cc/300?u=sarah',
      bio: 'Design Engineer at Acme Inc. Building beautiful interfaces.',
    },
    {
      id: 'alex',
      name: 'Alex Rivera',
      username: '@alex_r',
      avatar: 'https://i.pravatar.cc/300?u=alex',
      bio: 'Full-stack developer and open source contributor.',
    },
    {
      id: 'jordan',
      name: 'Jordan Lee',
      username: '@jordan_lee',
      avatar: 'https://i.pravatar.cc/300?u=jordan',
      bio: 'DevOps lead. Automating all the things.',
    },
  ]

  let activeProfile = $state<Profile | null>(null)
</script>

<HoverCard.Root
  onTriggerValueChange={(e) => {
    activeProfile = profiles.find((p) => p.id === e.value) ?? null
  }}
>
  <p class={styles.Paragraph}>
    Reviewed by{' '}
    <HoverCard.Trigger value="sarah" class={styles.Trigger}>
      {#snippet asChild(props)}
        <a href="#" {...props()}>@sarah_chen</a>
      {/snippet}
    </HoverCard.Trigger>
    ,{' '}
    <HoverCard.Trigger value="alex" class={styles.Trigger}>
      {#snippet asChild(props)}
        <a href="#" {...props()}>@alex_r</a>
      {/snippet}
    </HoverCard.Trigger>
    , and{' '}
    <HoverCard.Trigger value="jordan" class={styles.Trigger}>
      {#snippet asChild(props)}
        <a href="#" {...props()}>@jordan_lee</a>
      {/snippet}
    </HoverCard.Trigger>
  </p>
  <Portal>
    <HoverCard.Positioner>
      <HoverCard.Content class={styles.Content}>
        <HoverCard.Arrow class={styles.Arrow}>
          <HoverCard.ArrowTip class={styles.ArrowTip} />
        </HoverCard.Arrow>
        {#if activeProfile}
          <div class={styles.Body}>
            <div class={styles.Header}>
              <img class={styles.Avatar} src={activeProfile.avatar} alt={activeProfile.name} />
            </div>
            <div>
              <p class={styles.Name}>{activeProfile.name}</p>
              <p class={styles.Username}>{activeProfile.username}</p>
            </div>
            <p class={styles.Bio}>{activeProfile.bio}</p>
          </div>
        {/if}
      </HoverCard.Content>
    </HoverCard.Positioner>
  </Portal>
</HoverCard.Root>

```

## API Reference

### Props

**Component API Reference**

#### React

**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-value]` | The value of the item |
| `[data-current]` | Present when current |
| `[data-state]` | "open" | "closed" |


#### Solid

**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` | `(props: ParentProps<'div'>) => Element` | 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` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | 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` | `(props: ParentProps<'div'>) => Element` | 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` | `(props: ParentProps<'button'>) => Element` | 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-value]` | The value of the item |
| `[data-current]` | Present when current |
| `[data-state]` | "open" | "closed" |


#### Vue

**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. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `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 |
| `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` | `HoverCardApi<PropTypes>` | Yes |  |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `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-value]` | The value of the item |
| `[data-current]` | Present when current |
| `[data-state]` | "open" | "closed" |


#### Svelte

**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` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**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` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


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


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `render` | `Snippet<[UseHoverCardContext]>` | Yes |  |


**Positioner Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**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` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Trigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | hover-card |
| `[data-part]` | trigger |
| `[data-placement]` | The placement of the trigger |
| `[data-value]` | The value of the item |
| `[data-current]` | Present when current |
| `[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 |
| `triggerValue` | `string` | The trigger value |
| `setTriggerValue` | `(value: string) => void` | Function to set the trigger value |
| `reposition` | `(options?: Partial<PositioningOptions>) => void` | Function to reposition the popover |