Hover Card

A card that appears when hovering over a trigger element. Built on Radix UI with configurable delay, alignment, and side positioning.

@visor

Side Positioning

Use the side prop on HoverCardContent to control which side of the trigger the card appears on.

Rich Content

Hover cards can contain structured content such as user profiles, previews, or metadata.

Justin Schier

Open/Close Delay

Control how quickly the card appears and disappears with openDelay and closeDelay (in milliseconds) on the root HoverCard component.

<HoverCard openDelay={200} closeDelay={100}>
  <HoverCardTrigger asChild>
    <a href="#">Hover me</a>
  </HoverCardTrigger>
  <HoverCardContent>
    <p>Appears after 200ms, disappears after 100ms.</p>
  </HoverCardContent>
</HoverCard>

Installation

npx visor add hover-card

This copies two files into your project:

components/ui/hover-card/hover-card.tsx — the component
components/ui/hover-card/hover-card.module.css — the styles

Usage

import {
  HoverCard,
  HoverCardTrigger,
  HoverCardContent,
} from '@/components/ui/hover-card/hover-card';

export default function Example() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <a href="#">Hover me</a>
      </HoverCardTrigger>
      <HoverCardContent>
        <p>Card content here.</p>
      </HoverCardContent>
    </HoverCard>
  );
}

API Reference

HoverCardProps

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state of the hover card.
`onOpenChange`	`(open: boolean) => void`	—	Callback when the open state changes.
`openDelay`	`number`	`700`	Milliseconds to wait before opening on hover.
`closeDelay`	`number`	`300`	Milliseconds to wait before closing after hover ends.
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	Side of the trigger the card appears on (on HoverCardContent).
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Alignment of the card relative to the trigger (on HoverCardContent).
`sideOffset`	`number`	`4`	Distance in pixels between the trigger and the card (on HoverCardContent).
`className`	`string`	—	Additional CSS class names to merge onto HoverCardContent.

Sub-components

Component	Element	Purpose
`HoverCard`	Root	Context provider (wraps Radix HoverCard.Root)
`HoverCardTrigger`	Any element	The element that triggers the card on hover
`HoverCardContent`	Floating panel	The card container; accepts `side`, `align`, and `sideOffset`

Accessibility

Built on Radix UI HoverCard — the content region is not focusable by default. Use HoverCard for supplemental, non-critical information only.
For content that must be keyboard-accessible (e.g., links, buttons inside the card), use Popover instead.
The trigger should be a focusable element (link or button) so keyboard users can navigate to the associated content in another way.
Screen readers are not guaranteed to announce hover card content; treat it as decorative preview text.