Hover Card
A floating card that appears on hover, perfect for showing user profiles, previews, and additional context without navigating away. Supports configurable positioning, alignment, and open/close delays.
Live Preview
Hover over the trigger to see the card. Adjust side and alignment to see changes instantly.
1<AidashHoverCard2side="bottom"3align="center"4trigger={<button>Hover over me</button>}5>6<UserProfileContent />7</AidashHoverCard>Installation
Install the Aidash Components package using your preferred package manager.
$ pnpm add @aidash/componentsImport
Import the AidashHoverCard component into your file.
import { AidashHoverCard } from '@/components/aidash/hover-card';Basic Usage
A simple hover card showing a user profile on hover.
1<AidashHoverCard2trigger={<a href="/user/johndoe">@johndoe</a>}3>4<div className="w-64">5 <p className="font-semibold">John Doe</p>6 <p className="text-sm text-muted">@johndoe</p>7 <p className="text-xs mt-2">Full-stack developer.</p>8 <div className="flex gap-4 mt-2 text-xs">9 <span><strong>920</strong> Followers</span>10 <span><strong>215</strong> Following</span>11 </div>12</div>13</AidashHoverCard>Positions
The card can appear on any of the four sides of the trigger element.
1<AidashHoverCard side="top" trigger={<Button>Top</Button>}>2<p>Appears above the trigger</p>3</AidashHoverCard>4 5<AidashHoverCard side="bottom" trigger={<Button>Bottom</Button>}>6<p>Appears below the trigger</p>7</AidashHoverCard>8 9<AidashHoverCard side="left" trigger={<Button>Left</Button>}>10<p>Appears to the left</p>11</AidashHoverCard>12 13<AidashHoverCard side="right" trigger={<Button>Right</Button>}>14<p>Appears to the right</p>15</AidashHoverCard>Alignment
Control how the card aligns relative to the trigger with start, center, or end.
1<AidashHoverCard side="bottom" align="start" trigger={<Button>Start</Button>}>2<p>Aligned to the start</p>3</AidashHoverCard>4 5<AidashHoverCard side="bottom" align="center" trigger={<Button>Center</Button>}>6<p>Aligned to the center</p>7</AidashHoverCard>8 9<AidashHoverCard side="bottom" align="end" trigger={<Button>End</Button>}>10<p>Aligned to the end</p>11</AidashHoverCard>Rich Content
Hover cards can display rich content including avatars, stats, descriptions, and action buttons.
1<AidashHoverCard2trigger={3 <div className="flex items-center gap-2">4 <Avatar initials="AK" />5 <span>Alex Kim</span>6 </div>7}8>9<div className="w-72">10 <div className="flex items-start gap-3 mb-3">11 <Avatar size="lg" initials="AK" />12 <div>13 <p className="font-semibold">Alex Kim</p>14 <p className="text-xs text-muted">@alexkim</p>15 <Badge>Pro Member</Badge>16 </div>17 </div>18 <p className="text-xs">Senior product designer...</p>19 <div className="flex gap-4 text-xs">20 <span><strong>3.2k</strong> Followers</span>21 <span><strong>891</strong> Following</span>22 </div>23 <div className="flex gap-2 mt-3">24 <Button size="sm">Follow</Button>25 <Button size="sm" variant="outline">Message</Button>26 </div>27</div>28</AidashHoverCard>Custom Delays
Adjust open and close delays for different interaction patterns. Longer open delays prevent accidental triggers, shorter close delays feel more responsive.
Different delay configurations
1{/* Instant -- no delay */}2<AidashHoverCard openDelay={0} closeDelay={0} trigger={...}>3...4</AidashHoverCard>5 6{/* Default timing */}7<AidashHoverCard openDelay={200} closeDelay={100} trigger={...}>8...9</AidashHoverCard>10 11{/* Slow -- prevent accidental triggers */}12<AidashHoverCard openDelay={500} closeDelay={300} trigger={...}>13...14</AidashHoverCard>API Reference
Complete list of props accepted by AidashHoverCard.
| Prop | Type | Default | Description |
|---|---|---|---|
| trigger | ReactNode | — | The element that triggers the hover card on hover |
| children | ReactNode | — | Content displayed inside the hover card |
| side | 'top' | 'bottom' | 'left' | 'right' | 'bottom' | Which side of the trigger the card appears on |
| align | 'start' | 'center' | 'end' | 'center' | Alignment of the card relative to the trigger |
| openDelay | number | 200 | Delay in ms before the card opens on hover |
| closeDelay | number | 100 | Delay in ms before the card closes on mouse leave |
| className | string | '' | Additional CSS classes for the card container |
trigger prop accepts any ReactNode. For best results, wrap interactive elements like links or buttons so the hover area is well-defined.Accessibility
Important considerations for hover-based interactions and assistive technology.
Hover vs Focus
Hover cards are triggered by mouse hover events. They are primarily a progressive enhancement for pointer-based interactions. Ensure critical information is accessible through other means for keyboard and touch users.
Supplementary Content
Use hover cards for supplementary, non-essential information. The content should enhance the experience but not be required for completing tasks. If the content is essential, consider using a Dialog or Popover instead.
Delay Configuration
The default openDelay of 200ms prevents accidental triggering during normal mouse movement. The closeDelay of 100ms allows users to move the cursor into the card content without it disappearing.
Touch Devices
On touch devices, hover interactions do not exist. Consider providing a tap-to-reveal alternative or ensuring the hover card content is available through navigation (e.g., a profile link).
1{/* Hover card as progressive enhancement */}2{/* The link still works without hover */}3<AidashHoverCard4trigger={<a href="/user/sarah">@sarah</a>}5>6<UserProfilePreview user={sarah} />7</AidashHoverCard>8 9{/* For essential content, prefer Popover or Dialog */}10{/* instead of hover-only interactions */}Related
Other components that work well alongside Hover Card.