HoverCard
Rich preview card shown on hover, built on Radix UI with animated scale and fade.
Live Demo
Props
| Prop | Type | Default | Description |
|---|---|---|---|
sideOffset | number | 8 | componentPages.hover_card_prop_sideOffset |
showArrow | boolean | false | componentPages.hover_card_prop_showArrow |
align | 'start' | 'center' | 'end' | 'center' | componentPages.hover_card_prop_align |
side | 'top' | 'right' | 'bottom' | 'left' | 'bottom' | componentPages.hover_card_prop_side |
openDelay | number | 700 | componentPages.hover_card_prop_openDelay |
closeDelay | number | 300 | componentPages.hover_card_prop_closeDelay |
Usage
import {
HoverCard,
HoverCardTrigger,
HoverCardContent,
} from '@ghiberti85/ui'
<HoverCard openDelay={200}>
<HoverCardTrigger asChild>
<a href="#">@username</a>
</HoverCardTrigger>
<HoverCardContent showArrow>
<p>User profile info here</p>
</HoverCardContent>
</HoverCard>