HoverCard

import { HoverCard } from 'yarcl';

Written by @ada

<HoverCard content={<UserPreview id="ada" />}>
  <Link href="/users/ada">@ada</Link>
</HoverCard>

The pointer can move from the trigger into the card without closing it, so the card can contain links. Hover cards are supplementary: don’t put anything in them that isn’t reachable elsewhere.

Props

Prop	Type	Default	Description
children required	ReactElement		A single focusable element, usually a Link.
content required	ReactNode		Rich preview content. Can contain links; the pointer can move into the card without closing it.
closeDelay	number	150	Delay before closing after the pointer leaves, in ms.
openDelay	number	300	Delay before opening, in ms.
padding	Spacingconfig	config.defaults.padding	Inner padding, from the spacing config.
placement	Placement	'bottom'	Preferred side. Flips when there isn't room.
radius	Radiusconfig	config.defaults.radius	Corner radius, from the radii config.