Overlays

HoverCard

A preview of what a link points to, on hover.

import { HoverCard } from "@flinbu/seed";

A person

Approved by Ana Ruiz 2 hours ago.

import { Avatar, Badge, HoverCard } from "@flinbu/seed";

<p className="m-0 text-secondary body-body-3-regular">
  Approved by{" "}
  <HoverCard content={
    <div className="flex gap-sm">
      <Avatar name="Ana Ruiz" />
      <div className="flex flex-col gap-xxxs">
        <span className="text-primary label-label-2-semibold">Ana Ruiz</span>
        <span className="text-secondary body-body-4-regular">Design lead · Acme</span>
        <span className="mt-xxs"><Badge variant="success" dot>Online</Badge></span>
      </div>
    </div>}>
    <a href="#" className="text-link underline underline-offset-3">Ana Ruiz</a>
  </HoverCard>{" "}2 hours ago.
</p>

Use it for

People, tokens and pages mentioned in text.

Use something else for

Actions or anything essential: keyboard and touch users go straight to the link.

Props

Prop	Type	Default	Description
`content`	`ReactNode`	–	The preview.
`children`	`ReactElement`	–	One link.
`openDelay / closeDelay`	`number`	`500 / 200`	ms.
`side / align`	`Side / Align`	`'bottom' / 'start'`	Placement.

Accessibility

Built on Radix HoverCard: opens on hover and keyboard focus after a delay; the link still works on its own.