Hover Card

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add hover-card

Usage#

import {
  HoverCard,
  HoverCardTrigger,
  HoverCardContent,
} from "@/components/ui/hover-card"

export function Example() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <a href="/people/katiep">@katiep</a>
      </HoverCardTrigger>
      <HoverCardContent>Katie Park, Design Systems</HoverCardContent>
    </HoverCard>
  )
}

Anatomy#

import {
  HoverCard,
  HoverCardTrigger,
  HoverCardContent,
  HoverCardMedia,
  HoverCardTitle,
  HoverCardDescription,
  HoverCardFooter,
} from "@/components/ui/hover-card"

<HoverCard>
  <HoverCardTrigger />
  <HoverCardContent>
    <HoverCardMedia />
    <HoverCardTitle />
    <HoverCardDescription />
    <HoverCardFooter />
  </HoverCardContent>
</HoverCard>

Link preview#

The page behind a link. HoverCardMedia sets the picture 8px in from the card's edges instead of bleeding to them, with concentric corners (the card's 16px radius minus 8px of inset leaves 8px on the picture). The copy under it keeps the card's own 16px. It is aspect-video until you give it another ratio.

Commit preview#

A reference in running text, opened into what it points at: the subject, the author, and the size of the change. The counts sit in HoverCardFooter, a muted well set in from the card's edges like the media, where a divider line would otherwise go. They are tabular-nums, so a column of them lines up. align="start" opens the card from the hash's left edge.

Placement#

side, align and sideOffset are Radix's, and the card flips when the side you asked for has no room. showArrow adds a pointer toward the link. The card grows out of the trigger it previews, from Radix's transform origin, rather than from its own centre. These open after 150ms so you can sweep across them.

Timing#

The card waits openDelay (700ms) before it opens, so a pointer passing over a paragraph full of links doesn't set off a string of cards, and closeDelay (300ms) after the pointer leaves, which is the time it has to cross the gap into the card. Both are props on HoverCard. Shorten the open delay where the preview is the point (a list of people), and keep the close delay: without it the card vanishes on the way to it.

Accessibility#

A hover card is for sighted pointer users. It opens when the trigger has focus, but the card never takes focus and it never opens on touch, so everything in it must also be reachable where the link goes. Make the trigger a real link to that place, and never put the only way to do something inside the card. When the content has to be operated, use a Popover, which opens on a click and moves focus into itself.

API reference#

FAQ#