Ark Logo

Hover Card

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

@grizzly_codes

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 { Portal } from 'solid-js/web'
import { HoverCard } from '@ark-ui/solid'

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

Controlled HoverCard

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

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

export const Controlled = () => {
  const [isOpen, setOpen] = createSignal(false)
  return (
    <>
      <button type="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>
    </>
  )
}

Custom Positioning

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

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

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

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 { Portal } from 'solid-js/web'
import { HoverCard } from '@ark-ui/solid'

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

API Reference

Root

PropDefaultType
closeDelay300
number

The duration from when the mouse leaves the trigger or content until the hover card closes.

defaultOpen
boolean

The initial open state of the hover card when it is first rendered. Use when you do not need to control its open state.

id
string

The unique identifier of the machine.

ids
Partial<{ trigger: string content: string positioner: string arrow: string }>

The ids of the elements in the popover. Useful for composition.

lazyMountfalse
boolean

Whether to enable lazy mounting

onExitComplete
() => void

Function called when the animation ends in the closed state.

onOpenChange
(details: OpenChangeDetails) => void

Function called when the hover card opens or closes.

open
boolean

Whether the hover card is open

openDelay700
number

The duration from when the mouse enters the trigger until the hover card opens.

positioning
PositioningOptions

The user provided options used to position the popover content

present
boolean

Whether the node is present (controlled by the user)

unmountOnExitfalse
boolean

Whether to unmount on exit.

Arrow

PropDefaultType
asChild
(props: ParentProps<'div'>) => Element

ArrowTip

PropDefaultType
asChild
(props: ParentProps<'div'>) => Element

Content

PropDefaultType
asChild
(props: ParentProps<'div'>) => Element

Data AttributeValue
[data-scope]hover-card
[data-part]content
[data-state]"open" | "closed"
[data-placement]The placement of the content

Positioner

PropDefaultType
asChild
(props: ParentProps<'div'>) => Element

Trigger

PropDefaultType
asChild
(props: ParentProps<'button'>) => Element

Data AttributeValue
[data-scope]hover-card
[data-part]trigger
[data-placement]The placement of the trigger
[data-state]"open" | "closed"