Skip to Content
ComponentsHoverCard

HoverCard

A preview that appears on hover: a user card behind a mention, a repository summary behind a link.

Not a Tooltip. A tooltip labels something in a few words and is announced as the element’s description. A hover card holds real content, including links you can move the pointer into.

Live Examples

Live Example
☀️
Copy
View Code
import { HoverCard, HoverCardTrigger, HoverCardContent, Avatar, Badge } from '@jarllyng/nostromo' export default function HoverCardExample() { return ( <p className="text-sm text-foreground"> Maintained by{' '} <HoverCard> <HoverCardTrigger className="font-medium underline underline-offset-4"> @jarllyng </HoverCardTrigger>...

Supplementary by nature

It opens on hover and on keyboard focus, but its content is not reachable by keyboard beyond that, and it never opens on touch. Radix marks the content aria-hidden, which is correct and means a screen reader will not see it at all.

So everything inside a hover card must exist somewhere else too. Use it to save a click, never to carry the only copy of something.

Import

import {
  HoverCard,
  HoverCardTrigger,
  HoverCardContent,
} from "@jarllyng/nostromo";

Props

PropTypeDefaultDescription
openDelaynumber700Milliseconds before it opens
closeDelaynumber300Milliseconds before it closes

The delays matter more than they look. Too short and the card flashes open as the pointer crosses the trigger on its way somewhere else.

Tooltip for a short label, Popover when the content should stay open and be interactive, since that one is reachable by keyboard and touch.

Last updated on
ContextMenuScrollArea