120k
New

Hover Card

PreviousNext

For sighted users to preview content available behind a link.

Installation

pnpm dlx shadcn@latest add @force-ui-ember/hover-card

Usage

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from '@/ui/hover-card';
<HoverCard>
  <HoverCardTrigger>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 @openDelay and @closeDelay on the HoverCard to control when the card opens and closes.

<HoverCard @openDelay={{100}} @closeDelay={{200}}>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent>Content</HoverCardContent>
</HoverCard>

Positioning

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

<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent @side="top" @align="start">
    Content
  </HoverCardContent>
</HoverCard>

Examples

Basic

Sides

RTL

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference

See the Radix UI documentation for more information.