Hover Card

A preview card that appears when hovering over a trigger element, perfect for showing rich previews of links, profiles, or content.

Preview

@zostel

Usage

tsx
import {
  HoverCard,
  HoverCardTrigger,
  HoverCardContent,
} from "zostel-ui";

<HoverCard>
  <HoverCardTrigger asChild>
    <a href="/zostel" className="text-zostel-orange underline">
      @zostel_official
    </a>
  </HoverCardTrigger>
  <HoverCardContent className="w-72">
    <div className="flex gap-3">
      <Avatar src="/zostel-logo.png" />
      <div>
        <h4 className="text-sm font-semibold">Zostel</h4>
        <p className="text-sm text-muted-foreground">
          India's largest chain of hostels.
        </p>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>

Props

openDelay
Type: number
Default: 700

Delay in milliseconds before the hover card opens

closeDelay
Type: number
Default: 300

Delay in milliseconds before the hover card closes

open
Type: boolean
Default: —

Controlled open state of the hover card

onOpenChange
Type: (open: boolean) => void
Default: —

Callback when the open state changes
Previous Popover Next Tooltip