HoverCard
OverlaysStable
Hover-triggered floating card for displaying rich preview content like user profiles or link previews.
Quick Import
import { HoverCard } from "@cohere-ai/waypoint-ui/hover-card";Live Preview
Loading HoverCard...
Props
| Name | Type | Default | Description |
|---|---|---|---|
align | 'start' | 'center' | 'end' | 'center' | Alignment relative to trigger (on HoverCardContent) |
sideOffset | number | 4 | Distance from trigger |
Examples
User Profile Card
Hover card showing a user profile on username hover
1 import { HoverCard, HoverCardTrigger, HoverCardContent } from '@cohere-ai/waypoint-ui/hover-card'; 2 3 <HoverCard> 4 <HoverCardTrigger asChild> 5 <a href="#">@username</a> 6 </HoverCardTrigger> 7 <HoverCardContent> 8 <div className="flex gap-3"> 9 <Avatar><AvatarFallback>UN</AvatarFallback></Avatar> 10 <div> 11 <p className="font-semibold">Full Name</p> 12 <p className="text-sm text-muted-foreground">Joined January 2024</p> 13 </div> 14 </div> 15 </HoverCardContent> 16 </HoverCard>
Additional Resources
Found an Issue?
If you've encountered a bug or have feedback about the HoverCard component, please report it to our team. Your feedback helps us improve Waypoint.
Available for all users • Issue will be created in Linear
Was this page helpful?
Your feedback helps us improve our documentation.
Need Help?
Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.