Data

HoverCard

Rich hover popover that stays open while the pointer is over the card; the trigger also opens it on keyboard focus.

Import

import { HoverCard } from "@zephora/react";

Examples

Profile preview

<HoverCard
  content={
    <div style={{ display: "flex", gap: 12, maxWidth: 260 }}>
      <Avatar name="Ada Lovelace" size="lg" />
      <div>
        <Text weight="semibold">Ada Lovelace</Text>
        <Paragraph size="sm" muted>
          Wrote the first published algorithm intended for a machine.
        </Paragraph>
      </div>
    </div>
  }
>
  <Button variant="link">@ada</Button>
</HoverCard>

Custom delays and placement

`openDelay` and `closeDelay` tune how forgiving the hover interaction is.

<HoverCard
  placement="right"
  openDelay={0}
  closeDelay={400}
  content={<Text size="sm">Opens instantly, lingers 400 ms.</Text>}
>
  <Button variant="outline">Hover me</Button>
</HoverCard>

API

HoverCard props

Prop	Type	Default	Description
`content` *	`ReactNode`	—	Rich interactive content shown inside the card.
`children` *	`ReactElement`	—	Single trigger element; handlers are cloned onto it.
`placement`	`Placement`	`"bottom"`	Preferred side / alignment relative to the trigger.
`openDelay`	`number`	`300`	Delay in ms before opening on hover.
`closeDelay`	`number`	`200`	Delay in ms before closing after the pointer leaves.
`showArrow`	`boolean`	`false`	Renders a small arrow pointing at the trigger. The card and arrow expose the resolved side via a data-side attribute for CSS targeting.
`open / defaultOpen / onOpenChange`	`boolean / boolean / (open: boolean) => void`	—	Controlled and uncontrolled open state.
`classNames`	`Partial<Record<"root" \| "arrow", string>>`	—	Per-slot class overrides: root targets the floating card (alongside className), arrow the arrow element. Applied after module classes and also in unstyled mode.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.