Delphi Design

A hover card component for rich preview content.

Default

Basic Hover Card

Usage

import { HoverCard, HoverCardTrigger, HoverCardContent, Button } from "@delphi/ui";

export function Example() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <Button variant="ghost">Hover me</Button>
      </HoverCardTrigger>
      <HoverCardContent>
        <p>Rich preview content</p>
      </HoverCardContent>
    </HoverCard>
  );
}

API Reference

Prop	Type	Default	Description
`openDelay`	`number`	`700`	Delay before opening in ms
`closeDelay`	`number`	`300`	Delay before closing in ms

HoverCardContent Props

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Preferred side
`align`	`"start" \| "center" \| "end"`	`"center"`	Preferred alignment
`sideOffset`	`number`	`4`	Distance from trigger

Use hover cards for rich preview content (user profiles, link previews)

Use asChild on HoverCardTrigger to preserve semantic elements

Include enough delay to prevent accidental triggers

Keep content scannable at a glance

Show supplementary info that enhances the trigger context

Put essential information only in hover cards — mobile can't hover

Include complex interactions inside hover cards

Use hover cards for actions — use Popover or DropdownMenu instead

Make hover cards too large or content-heavy