Hover Card

For sighted users to preview content available behind a link.

radix-ui.com

Basic

Default

<HoverCard>
  <HoverCardTrigger asChild={true}>
    <Button variant="outline">
      Hover me
    </Button>
  </HoverCardTrigger>
  <HoverCardContent>
    <div>
      <p>
        Unstyled content
      </p>
    </div>
  </HoverCardContent>
</HoverCard>

Custom Delay

<HoverCard openDelay={0} closeDelay={0}>
  <HoverCardTrigger asChild={true}>
    <Button variant="outline">
      Delayed Hover Card
    </Button>
  </HoverCardTrigger>
  <HoverCardContent>
    <div>
      <p>
        Unstyled content
      </p>
    </div>
  </HoverCardContent>
</HoverCard>

Positioning

Top

<HoverCard>
  <HoverCardTrigger asChild={true}>
    <Button variant="outline">
      Top
    </Button>
  </HoverCardTrigger>
  <HoverCardContent side="top">
    <p>
      Card positioned above the trigger
    </p>
  </HoverCardContent>
</HoverCard>

Right

<HoverCard>
  <HoverCardTrigger asChild={true}>
    <Button variant="outline">
      Right
    </Button>
  </HoverCardTrigger>
  <HoverCardContent side="right">
    <p>
      Card positioned to the right of the trigger
    </p>
  </HoverCardContent>
</HoverCard>

Bottom

<HoverCard>
  <HoverCardTrigger asChild={true}>
    <Button variant="outline">
      Bottom
    </Button>
  </HoverCardTrigger>
  <HoverCardContent side="bottom">
    <p>
      Card positioned below the trigger
    </p>
  </HoverCardContent>
</HoverCard>

Left

<HoverCard>
  <HoverCardTrigger asChild={true}>
    <Button variant="outline">
      Left
    </Button>
  </HoverCardTrigger>
  <HoverCardContent side="left">
    <p>
      Card positioned to the left of the trigger
    </p>
  </HoverCardContent>
</HoverCard>