WFP logoDesign System
Components

Hover Card

View on shadcn/ui

A popup that displays rich content when hovering over a trigger element.

Installation

pnpm dlx shadcn@latest add https://designsystem.wfp.org/r/hover-card.json

Usage

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card";
<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent>
    <p>Additional information appears here.</p>
  </HoverCardContent>
</HoverCard>

API reference

This component is built on top of Radix UI Hover Card. For additional props and detailed API documentation, refer to the Radix documentation.

On this page

InstallationUsageAPI reference