Use HoverCard to show a preview when hovering a trigger.
import { HoverCard, HoverCardTrigger, HoverCardContent } from '@tile-ui/react';
export default function HoverCardDemo() {
return (
<HoverCard>
<HoverCardTrigger className="component-preview__action">Hover me</HoverCardTrigger>
Registry install
pnpm dlx shadcn@latest add @tile-ui/hover-card
Package usage
import { HoverCard, HoverCardTrigger, HoverCardContent } from '@tile-ui/react';
<HoverCard>
<HoverCardTrigger>Hover me</HoverCardTrigger>
<HoverCardContent>Preview content.</HoverCardContent>
</HoverCard>
Highlights
- Open and close delay
- Side and align
- Trigger and content
Registry dependencies
| Item | Purpose |
|---|
hover-card | Component source and module styles |
core | Framework-agnostic logic helpers |
styles | Shared SCSS tokens and globals |
API reference
HoverCard
| Prop | Type | Default |
|---|
open | boolean | — |
defaultOpen | boolean | — |
openDelay | number | — |
closeDelay | number | — |
onOpenChange | (open: boolean) => void | — |
HoverCardTrigger
| Prop | Type | Default |
|---|
asChild | boolean | — |
HoverCardContent
| Prop | Type | Default |
|---|
side | 'top' | 'right' | 'bottom' | 'left' | — |
align | 'start' | 'center' | 'end' | — |
sideOffset | number | — |