Components
Hover Card
For sighted users to preview content available behind a link.
Usage
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@tulip-systems/core/components/client";<HoverCard>
<HoverCardTrigger>Hover</HoverCardTrigger>
<HoverCardContent>The React Framework – created and maintained by @vercel.</HoverCardContent>
</HoverCard>Trigger Delays
Use openDelay and closeDelay on HoverCard to control when the card opens and closes.
<HoverCard openDelay={100} closeDelay={200}>
<HoverCardTrigger>Hover</HoverCardTrigger>
<HoverCardContent>Content</HoverCardContent>
</HoverCard>Positioning
Use the side and align props on HoverCardContent to control placement.
<HoverCard>
<HoverCardTrigger>Hover</HoverCardTrigger>
<HoverCardContent side="top" align="start">
Content
</HoverCardContent>
</HoverCard>