Hover Card

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:

import { HoverCard, Portal } from '@ark-ui/react'

const Basic = () => (
  <HoverCard.Root>
    <HoverCard.Trigger>Hover me</HoverCard.Trigger>
    <Portal>
      <HoverCard.Positioner>
        <HoverCard.Content>
          <HoverCard.Arrow>
            <HoverCard.ArrowTip />
          </HoverCard.Arrow>
          Content
        </HoverCard.Content>
      </HoverCard.Positioner>
    </Portal>
  </HoverCard.Root>
)

import { HoverCard } from '@ark-ui/solid'
import { Portal } from 'solid-js/web'

const Basic = () => (
  <HoverCard.Root>
    <HoverCard.Trigger>Hover me</HoverCard.Trigger>
    <Portal>
      <HoverCard.Positioner>
        <HoverCard.Content>
          <HoverCard.Arrow>
            <HoverCard.ArrowTip />
          </HoverCard.Arrow>
          Content
        </HoverCard.Content>
      </HoverCard.Positioner>
    </Portal>
  </HoverCard.Root>
)

<script setup lang="ts">
import { ref } from 'vue'
import { HoverCard } from '@ark-ui/vue'

const open = ref(false)
</script>

<template>
  <HoverCard.Root>
    <HoverCard.Trigger>Hover me</HoverCard.Trigger>
    <Teleport to="body">
      <HoverCard.Positioner>
        <HoverCard.Content>
          <HoverCard.Arrow>
            <HoverCard.ArrowTip />
          </HoverCard.Arrow>
          Content
        </HoverCard.Content>
      </HoverCard.Positioner>
    </Teleport>
  </HoverCard.Root>
</template>

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

import { HoverCard, Portal } from '@ark-ui/react'
import { useState } from 'react'

const Controlled = () => {
  const [isOpen, setOpen] = useState(false)
  return (
    <>
      <button onClick={() => setOpen(!isOpen)}>click me</button>
      <HoverCard.Root open={isOpen} onOpenChange={() => setOpen(false)}>
        <HoverCard.Trigger>Hover me</HoverCard.Trigger>
        <Portal>
          <HoverCard.Positioner>
            <HoverCard.Content>
              <HoverCard.Arrow>
                <HoverCard.ArrowTip />
              </HoverCard.Arrow>
              Content
            </HoverCard.Content>
          </HoverCard.Positioner>
        </Portal>
      </HoverCard.Root>
    </>
  )
}

import { HoverCard } from '@ark-ui/solid'
import { createSignal } from 'solid-js'
import { Portal } from 'solid-js/web'

const Controlled = () => {
  const [isOpen, setOpen] = createSignal(false)
  return (
    <>
      <button onClick={() => setOpen(!isOpen)}>click me</button>
      <HoverCard.Root open={isOpen()} onOpenChange={() => setOpen(false)}>
        <HoverCard.Trigger>Hover me</HoverCard.Trigger>
        <Portal>
          <HoverCard.Positioner>
            <HoverCard.Content>
              <HoverCard.Arrow>
                <HoverCard.ArrowTip />
              </HoverCard.Arrow>
              Content
            </HoverCard.Content>
          </HoverCard.Positioner>
        </Portal>
      </HoverCard.Root>
    </>
  )
}

<script setup lang="ts">
import { ref } from 'vue'
import { HoverCard } from '@ark-ui/vue'

const open = ref(false)
</script>

<template>
  <button @click="() => (open = true)">Open Dialog</button>
  <HoverCard.Root v-model:open="open">
    <HoverCard.Trigger>Hover me</HoverCard.Trigger>
    <Teleport to="body">
      <HoverCard.Positioner>
        <HoverCard.Content>
          <HoverCard.Arrow>
            <HoverCard.ArrowTip />
          </HoverCard.Arrow>
          Content
        </HoverCard.Content>
      </HoverCard.Positioner>
    </Teleport>
  </HoverCard.Root>
</template>

Custom Positioning

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

import { HoverCard, Portal } from '@ark-ui/react'

const Positioning = () => (
  <HoverCard.Root positioning={{ placement: 'right', gutter: 12 }}>
    <HoverCard.Trigger>Hover me</HoverCard.Trigger>
    <Portal>
      <HoverCard.Positioner>
        <HoverCard.Content>
          <HoverCard.Arrow>
            <HoverCard.ArrowTip />
          </HoverCard.Arrow>
          Content
        </HoverCard.Content>
      </HoverCard.Positioner>
    </Portal>
  </HoverCard.Root>
)

import { HoverCard } from '@ark-ui/solid'
import { Portal } from 'solid-js/web'

const Positioning = () => (
  <HoverCard.Root positioning={{ placement: 'right', gutter: 12 }}>
    <HoverCard.Trigger>Hover me</HoverCard.Trigger>
    <Portal>
      <HoverCard.Positioner>
        <HoverCard.Content>
          <HoverCard.Arrow>
            <HoverCard.ArrowTip />
          </HoverCard.Arrow>
          Content
        </HoverCard.Content>
      </HoverCard.Positioner>
    </Portal>
  </HoverCard.Root>
)

<script setup lang="ts">
import { ref } from 'vue'
import { HoverCard } from '@ark-ui/vue'

const open = ref(false)
</script>

<template>
  <HoverCard.Root
    :positioning="{
      placement: 'right',
      gutter: 12,
    }"
  >
    <HoverCard.Trigger>Hover me</HoverCard.Trigger>
    <Teleport to="body">
      <HoverCard.Positioner>
        <HoverCard.Content>
          <HoverCard.Arrow>
            <HoverCard.ArrowTip />
          </HoverCard.Arrow>
          Content
        </HoverCard.Content>
      </HoverCard.Positioner>
    </Teleport>
  </HoverCard.Root>
</template>

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:

import { HoverCard, Portal } from '@ark-ui/react'

const RenderProp = () => (
  <HoverCard.Root>
    {(api) => (
      <>
        <HoverCard.Trigger>Hover me {api.isOpen ? '▲' : '▼'} </HoverCard.Trigger>
        <Portal>
          <HoverCard.Positioner>
            <HoverCard.Content>
              <HoverCard.Arrow>
                <HoverCard.ArrowTip />
              </HoverCard.Arrow>
              Content
            </HoverCard.Content>
          </HoverCard.Positioner>
        </Portal>
      </>
    )}
  </HoverCard.Root>
)

import { HoverCard } from '@ark-ui/solid'
import { Portal } from 'solid-js/web'

const RenderProp = () => (
  <HoverCard.Root>
    {(api) => (
      <>
        <HoverCard.Trigger>Hover me {api().isOpen ? '▲' : '▼'} </HoverCard.Trigger>
        <Portal>
          <HoverCard.Positioner>
            <HoverCard.Content>
              <HoverCard.Arrow>
                <HoverCard.ArrowTip />
              </HoverCard.Arrow>
              Content
            </HoverCard.Content>
          </HoverCard.Positioner>
        </Portal>
      </>
    )}
  </HoverCard.Root>
)

<script setup lang="ts">
import { ref } from 'vue'
import { HoverCard } from '@ark-ui/vue'

const open = ref(false)
</script>

<template>
  <HoverCard.Root v-slot="api">
    <HoverCard.Trigger>Hover me {{ api.isOpen ? '▲' : '▼' }}</HoverCard.Trigger>
    <Teleport to="body">
      <HoverCard.Positioner>
        <HoverCard.Content>
          <HoverCard.Arrow>
            <HoverCard.ArrowTip />
          </HoverCard.Arrow>
          Content
        </HoverCard.Content>
      </HoverCard.Positioner>
    </Teleport>
  </HoverCard.Root>
</template>

API Reference

Root

Prop	Type	Default
`closeDelay`	`number`
`defaultOpen`	`boolean`
`dir`	`'ltr' \| 'rtl'`	`"ltr"`
`getRootNode`	`() => Node \| ShadowRoot \| Document`
`id`	`string`
`ids`	`Partial<{ trigger: string content: string positioner: string arrow: string }>`
`lazyMount`	`boolean`	`false`
`onExitComplete`	`() => void`
`onOpenChange`	`(details: OpenChangeDetails) => void`
`open`	`boolean`
`openDelay`	`number`
`positioning`	`PositioningOptions`
`present`	`boolean`
`unmountOnExit`	`boolean`	`false`

Arrow

Prop	Type	Default
`asChild`	`boolean`

Content

Prop	Type	Default
`asChild`	`boolean`

Trigger

Prop	Type	Default
`asChild`	`boolean`

ArrowTip

Prop	Type	Default
`asChild`	`boolean`

Positioner

Prop	Type	Default
`asChild`	`boolean`