Hover Card

Overlay

Data Display

Display rich content in a popover when hovering over an element.

Preview

Hover over the link to see additional content

@nextjs

Positions

Hover cards can appear on different sides

Hover (Top)

Hover (Right)

Hover (Bottom)

Hover (Left)

Props

Component API reference

Prop	Type	Default	Description
`content*`	`ReactNode`	—	Content to display in the hover card
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	Preferred side for the card
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Alignment relative to trigger
`openDelay`	`number`	`700`	Delay before opening (ms)
`closeDelay`	`number`	`300`	Delay before closing (ms)
`children*`	`ReactNode`	—	Trigger element

Usage

Import and implementation examples

import { HoverCard, HoverCardContent, HoverCardHeader, HoverCardTitle, HoverCardDescription } from '@/components/ui/hover-card'

// Basic usage
<HoverCard
  content={
    <HoverCardContent>
      <HoverCardTitle>Title</HoverCardTitle>
      <HoverCardDescription>
        Description text here
      </HoverCardDescription>
    </HoverCardContent>
  }
>
  <a href="#">Hover me</a>
</HoverCard>

// With position
<HoverCard
  side="top"
  content={
    <HoverCardContent>
      <HoverCardTitle>Top Position</HoverCardTitle>
      <HoverCardDescription>This appears above.</HoverCardDescription>
    </HoverCardContent>
  }
>
  <span>Hover for top card</span>
</HoverCard>

// Custom delays
<HoverCard
  openDelay={500}
  closeDelay={200}
  content={<HoverCardContent>Quick response</HoverCardContent>}
>
  <span>Fast hover card</span>
</HoverCard>

Features

Built-in functionality

Hover trigger: Opens on mouse hover with configurable delays
Four positions: Top, right, bottom, left placement
Auto-positioning: Adjusts position to stay in viewport
Rich content: Supports complex layouts and components
Smooth animations: Fade and scale entrance/exit
Configurable delays: Custom open and close delays
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

role="tooltip" for hover cardaria-describedby linking content to triggerProper focus management

Keyboard Navigation

Key	Action
`Focus`	Opens card (keyboard accessible)
`Blur`	Closes card
`Escape`	Closes card

Notes

Content is accessible to screen readers
Works with keyboard focus, not just mouse hover
Auto-dismisses when focus leaves

Related Components

Tooltip Popover Card