Hover Card

A popover that appears on hover, focus, or long press to preview content available behind a link.

"use client"

import { Button } from "@/components/ui/button"

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/hover-card.json

Usage

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

<HoverCardTrigger>
  <Button variant="link">Hover</Button>
  <HoverCard>
    The React Framework – created and maintained by @vercel.
  </HoverCard>
</HoverCardTrigger>

Composition

Use the following composition to build a HoverCard:

HoverCardTrigger
├── Button
└── HoverCard

Trigger Delays

Use delay and closeDelay on the HoverCardTrigger to control when the card opens and closes.

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

Positioning

Use the placement prop on HoverCard to control placement.

<HoverCardTrigger>
  <Button variant="link">Hover</Button>
  <HoverCard placement="top">Content</HoverCard>
</HoverCardTrigger>

Basic

"use client"

import { Button } from "@/components/ui/button"

Sides

"use client"

import { Button } from "@/components/ui/button"

RTL

To enable RTL support, see the RTL configuration guide.

"use client"

import {

API Reference

See the React Aria documentation for more information.

File Upload Input

On This Page

Installation Usage Composition Trigger Delays Positioning Basic Sides RTL API Reference