Hover Card

For sighted users to preview content available behind a link.

<HoverCard>
  <HoverCardTrigger
    delay={10}
    closeDelay={100}
    render={<Button variant="link" />}
  >
    Hover Here
  </HoverCardTrigger>
  <HoverCardContent className="flex w-64 flex-col gap-0.5">
    <div className="font-semibold">@nextjs</div>
    <div>The React Framework - created and maintained by @vercel.</div>
    <div className="mt-1 text-xs text-muted-foreground">
      Joined December 2021
    </div>
  </HoverCardContent>
</HoverCard>

Installation

pnpm dlx cubix@latest add hover-card --base aria

Usage

Import

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/cubix/hover-card"

Example

<HoverCard>
  <HoverCardTrigger render={<Button variant="link" />}>
    Hover
  </HoverCardTrigger>
  <HoverCardContent>
    The React Framework - created and maintained by @vercel.
  </HoverCardContent>
</HoverCard>

Composition

Use the following composition to build a HoverCard:

HoverCard
├── HoverCardTrigger
└── HoverCardContent

Trigger Delays

Use delay and closeDelay on the trigger to control when the card opens and closes. On Radix UI, set openDelay and closeDelay on HoverCard instead.

<HoverCard>
  <HoverCardTrigger delay={100} closeDelay={200} render={<Button variant="link" />}>
    Hover
  </HoverCardTrigger>
  <HoverCardContent>Content</HoverCardContent>
</HoverCard>

Positioning

Use the side and align props on HoverCardContent to control placement.

<HoverCard>
  <HoverCardTrigger render={<Button variant="link" />}>
    Hover
  </HoverCardTrigger>
  <HoverCardContent side="top" align="start">
    Content
  </HoverCardContent>
</HoverCard>

Basic

<HoverCard>
  <HoverCardTrigger
    delay={10}
    closeDelay={100}
    render={<Button variant="link" />}
  >
    Hover Here
  </HoverCardTrigger>
  <HoverCardContent className="flex w-64 flex-col gap-0.5">
    <div className="font-semibold">@nextjs</div>
    <div>The React Framework - created and maintained by @vercel.</div>
    <div className="mt-1 text-xs text-muted-foreground">
      Joined December 2021
    </div>
  </HoverCardContent>
</HoverCard>

Sides

<HoverCard>
  <HoverCardTrigger
    delay={100}
    closeDelay={100}
    render={<Button variant="outline" className="capitalize" />}
  >
    top
  </HoverCardTrigger>
  <HoverCardContent side="top">
    <div className="flex flex-col gap-1">
      <h4 className="font-medium">Hover Card</h4>
      <p>This hover card appears on the top side of the trigger.</p>
    </div>
  </HoverCardContent>
</HoverCard>

API Reference

HoverCard

Prop	Type	Default	Description
open	boolean	-	Controlled open state. Omit to use uncontrolled mode.
defaultOpen	boolean	false	Initial open state when uncontrolled.
onOpenChange	(open: boolean) => void	-	Called when the open state changes.
children	React.ReactNode	-	The trigger and content elements.

HoverCardTrigger

Prop	Type	Default	Description
delay	number	600	Milliseconds to wait before opening (Base UI). On Radix, use openDelay on HoverCard.
closeDelay	number	300	Milliseconds to wait before closing (Base UI). On Radix, use closeDelay on HoverCard.
render	React.ReactElement	-	Compose the trigger onto a child element such as Button (Base UI).
asChild	boolean	-	Compose the trigger onto a child element such as Button (Radix UI).
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

HoverCardContent

Prop	Type	Default	Description
side	"top" \| "right" \| "bottom" \| "left"	"bottom"	Preferred side of the trigger to render the card on.
align	"start" \| "center" \| "end"	"center"	Alignment along the opposite axis of side.
sideOffset	number	4	Distance in pixels between the trigger and the card.
alignOffset	number	4	Offset in pixels along the alignment axis (Base UI).
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).