Docs
Hover-card
Hover Card
Displays a card that shows additional information when hovered.
Usage
Example Code
1import {
2HoverCard,
3HoverCardContent,
4HoverCardTrigger,
5} from "inc-design-system/hoverCard";
Example Code
1<HoverCard>
2 <HoverCardTrigger asChild>
3 <Button variant="text">Hover me</Button>
4 </HoverCardTrigger>
5 <HoverCardContent>
6 <p>This is the content of the hover card</p>
7 </HoverCardContent>
8</HoverCard>
Props
HoverCard
For more props:
HoverCardTrigger
For more props:
HoverCardContent
For more props:
Prop | Type | Description | Default |
---|---|---|---|
className | string | Additional class name for styling purposes. | - |
align | string | Alignment of the content relative to the trigger. Default is 'center'. | - |
sideOffset | number | Offset of the content from the trigger, in pixels. Default is 4. | - |