HoverCard

• Component overview: Hover-triggered information card for richer content than a tooltip, while keeping a lightweight hover interaction.
• Component group: Tips
• Implementation note: Built on top of Radix Hover Card, with a simplified API aligned with Popover.
• Default interaction: children is the trigger element by default.

Basic Usage

Result

Loading...

Live Editor

render(
  <div style={{ display: 'flex', gap: 32, alignItems: 'center', padding: '40px 0' }}>
    <HoverCard
      title="Reference"
      content="HoverCard is useful when the content is richer than a tooltip, but still opened by hover."
      side="bottom"
      align="start"
    >
      <Button variant="secondary" size="sm">
        Hover me
      </Button>
    </HoverCard>
  </div>,
)

Position Variants

HoverCard supports the same side and align positioning model as Popover.

Result

Loading...

Live Editor

render(
  <div style={{ display: 'flex', justifyContent: 'center', gap: 24, padding: '48px 0' }}>
    {[
      { label: 'Top', side: 'top', align: 'center' },
      { label: 'Right', side: 'right', align: 'center' },
      { label: 'Bottom', side: 'bottom', align: 'center' },
      { label: 'Left', side: 'left', align: 'center' },
    ].map(({ label, side, align }) => (
      <HoverCard
        key={label}
        title={label}
        content="HoverCard content"
        side={side}
        align={align}
        openDelay={10}
        closeDelay={100}
      >
        <Button variant="tertiary" size="sm">
          {label}
        </Button>
      </HoverCard>
    ))}
  </div>,
)

Custom Content Area

Result

Loading...

Live Editor

render(
  <HoverCard
    className="w-[320px]"
    content={
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{ fontWeight: 600 }}>Custom Content</div>
        <div style={{ fontSize: 14, lineHeight: 1.6 }}>
          You can pass custom nodes directly. The hover interaction and card shell remain
          consistent.
        </div>
      </div>
    }
  >
    <Button variant="tertiary" size="sm">
      Hover Custom
    </Button>
  </HoverCard>,
)

HoverCard Props

Prop	Type	Default	Description
children	ReactNode	—	Trigger element. By default the hover card uses children as the trigger.
content	ReactNode	—	Card content
title	ReactNode	—	Card title
side	'top' | 'bottom' | 'left' | 'right'	'bottom'	Popup direction
align	'start' | 'center' | 'end'	'center'	Alignment
sideOffset	number	4	Distance from the trigger element (px)
openDelay	number	10	Delay before opening on hover (ms)
closeDelay	number	100	Delay before closing after hover leaves (ms)
className	string	—	Custom style class
asChild	boolean	true	Whether children should act as the trigger element directly