Hover Card
Reveal supplementary content on hover or keyboard focus.
Preview
Import
import { HoverCard, HoverCardTrigger, HoverCardContent } from "@sigil-ui/components";Usage
<HoverCard>
<HoverCardTrigger asChild><Button variant="link">@sigil</Button></HoverCardTrigger>
<HoverCardContent>
<p className="text-sm">Token-driven design system for React.</p>
</HoverCardContent>
</HoverCard>Sub-components
This component includes the following parts:
<HoverCardTrigger><HoverCardContent>
Token integration
| CSS Variable | Purpose |
|---|---|
--s-card-radius | Card radius |
--s-border | Border |
--s-border-style | Border style |
--s-surface | Surface |
--s-text | Text |
--s-shadow-md | Shadow md |