Hover Card
For sighted users to preview content available behind a link.
Installation
npx shadcn@latest add @uqudo/hover-cardUsage
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@/components/uqudo/ui/hover-card"<HoverCard>
<HoverCardTrigger>Hover</HoverCardTrigger>
<HoverCardContent>The React Framework for the Web.</HoverCardContent>
</HoverCard>The card opens on hover and on focus, so it is keyboard reachable, but it is not announced to screen readers. Keep the content supplementary and make sure the same information is available elsewhere.
API Reference
HoverCard
Prop
Type
HoverCardTrigger
Prop
Type
HoverCardContent
Prop
Type
Data attributes
| Attribute | Element | Value |
|---|---|---|
data-slot | HoverCard | hover-card |
data-slot | HoverCardTrigger | hover-card-trigger |
data-slot | HoverCardContent | hover-card-content |