HoverCard
HoverCard shows supplementary content beside a target on hover or focus.
Source
LLM docs
Package
Examples
2
Properties
46
Playground
Basics
Pass the element that shows the card as
target and the card content as children. The card opens when the pointer rests on the target or when the target receives keyboard focus, stays open while the pointer is on the card, and closes on Escape. On touch devices a tap toggles it.Loading demo…
import { Avatar, Block, Button, HoverCard, Text } from '@plocks/ui';
export function Demo() {
return (
<HoverCard
target={
<Button variant="subtle" size="sm">
@plocks
</Button>
}
>
<Block gap="xs" style={{ maxWidth: 240 }}>
<Avatar
fallback="PB"
label="plocks"
description="@plocks"
accessibilityLabel="plocks"
/>
<Text size="sm" c="secondary">
Cross-platform UI components for React Native and the web.
</Text>
</Block>
</HoverCard>
);
}Click Trigger
Set
trigger="click" for cards with interactive content: a press toggles the card, focus moves into it, and Escape or a press outside closes it and returns focus to the target.Loading demo…
import { Block, Button, HoverCard, Text } from '@plocks/ui';
export function Demo() {
return (
<HoverCard
trigger="click"
w={260}
target={
<Button variant="outline" size="sm">
Show details
</Button>
}
>
<Block gap="xs">
<Text fw="semibold">Deployment #482</Text>
<Text size="sm" c="secondary">Built from main 4 minutes ago.</Text>
<Button size="xs" variant="subtle">
View logs
</Button>
</Block>
</HoverCard>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources