Hover Card
For sighted users to preview content available behind a link.
Installation
Usage
<HoverCard>
<HoverCard.Trigger render={<Button variant=Link />}>
{"Hover"->React.string}
</HoverCard.Trigger>
<HoverCard.Content>
{"The React Framework \u2013 created and maintained by @vercel."->React.string}
</HoverCard.Content>
</HoverCard>Trigger Delays
Use delay and closeDelay on the trigger to control when the card opens and
closes.
<HoverCard>
<HoverCardTrigger delay={100} closeDelay={200}>
Hover
</HoverCardTrigger>
<HoverCardContent>Content</HoverCardContent>
</HoverCard>Positioning
Use the side and align props on HoverCardContent to control placement.
<HoverCard>
<HoverCardTrigger>Hover</HoverCardTrigger>
<HoverCardContent side="top" align="start">
Content
</HoverCardContent>
</HoverCard>Examples
Basic
Sides
API Reference
See the Base UI documentation for more information.