Hover Card Component
For sighted users to preview content available behind a link.
AsChild Pattern
Use AsChild to compose triggers with your own styled elements.
Without AsChild
HoverCardTrigger renders its own div element.
@username
With AsChild
Button receives hover/focus behavior via TriggerContext.
Default
Hover over the trigger to display additional content.
Hover over
@nextjs
for more information.
User Profile Card
Common use case for showing user information on hover.
Article written by
@johndoe
on January 15, 2024.
Product Preview
Show product details on hover.
View Product
Another Product
Definition Tooltip
Provide definitions or explanations for technical terms.
The component uses
Floating UI
for intelligent positioning with automatic collision detection and
ARIA attributes
for screen reader compatibility.