ContextQMD
Back to Shadcn Ui

Hover Card

apps/v4/content/docs/components/radix/hover-card.mdx

latest2.2 KB
Original Source

<ComponentPreview styleName="radix-nova" name="hover-card-demo" previewClassName="h-80" />

Installation

<CodeTabs> <TabsList> <TabsTrigger value="cli">Command</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">
bash
npx shadcn@latest add hover-card
</TabsContent> <TabsContent value="manual"> <Steps className="mb-0 pt-2">

<Step>Install the following dependencies:</Step>

bash
npm install radix-ui

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="hover-card" title="components/ui/hover-card.tsx" styleName="radix-nova" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </CodeTabs>

Usage

tsx
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"
tsx
<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent>
    The React Framework – created and maintained by @vercel.
  </HoverCardContent>
</HoverCard>

Trigger Delays

Use openDelay and closeDelay on the HoverCard to control when the card opens and closes.

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

Positioning

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

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

Examples

Basic

<ComponentPreview styleName="radix-nova" name="hover-card-demo" previewClassName="h-80" />

Sides

<ComponentPreview styleName="radix-nova" name="hover-card-sides" previewClassName="h-[22rem]" />

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

<ComponentPreview styleName="radix-nova" name="hover-card-rtl" direction="rtl" previewClassName="h-80" />

API Reference

See the Radix UI documentation for more information.