Hover Card

For sighted users to preview content available behind a link.

@react.component
let make = () =>
  <HoverCard>

Installation


npx shadcn@latest add @rescript-shadcn/HoverCard

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

@react.component
let make = () =>
  <HoverCard>

Sides

let hoverCardSides = [
  (BaseUi.Types.Side.Left, "left"),
  (BaseUi.Types.Side.Top, "top"),

API Reference

See the Base UI documentation for more information.