Delphi Design

A floating card triggered on hover, ideal for non-essential preview content such as source citations, user profiles, and link previews. Uses the frosted glass overlay style with scale + fade animations.

Source Citation

A numbered citation badge that reveals the source document on hover — the primary use case in the Delphi chat experience.

Citation Card

Digital minds can reflect your knowledge and personality

with remarkable fidelity, allowing others to interact with your ideas even when you're unavailable.

Profile Preview

A classic pattern — hover over a mention to preview a user profile.

Profile Card

Created by

Link Preview

Hovering over a URL reveals a page title and description.

Link Preview

Read the full guide at delphi.ai/docs

Usage

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

export function CitationBadge() {
  return (
    <HoverCard openDelay={0} closeDelay={100}>
      <HoverCardTrigger asChild>
        <Badge variant="subtle" className="cursor-pointer rounded-full">
          1
        </Badge>
      </HoverCardTrigger>
      <HoverCardPortal>
        <HoverCardContent className="w-80">
          <h4 className="text-sm font-semibold">Source Title</h4>
          <p className="text-sm text-sand-10">Excerpt from the source...</p>
        </HoverCardContent>
      </HoverCardPortal>
    </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 for non-essential preview content (citations, profiles, links)

Set openDelay={0} for citation badges where instant feedback matters

Use asChild on HoverCardTrigger to preserve semantic elements

Keep content scannable — title, short excerpt, metadata

Wrap in HoverCardPortal when used inside scrollable or clipped containers

Put essential information only in hover cards — mobile cannot hover

Include interactive elements (buttons, forms) — use Popover instead

Use hover cards for actions — use DropdownMenu or Popover

Make cards too tall — keep to a quick glance (3–5 lines of content)