HoverCard

import { HoverCard } from '@yarcl/react';

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.

Spacing props accept typed breakpoint maps. See responsive props for supported props, defaults and examples.

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	config.timing.hoverCloseDelay	Delay before closing after the pointer leaves, in ms.
openDelay	number	config.timing.hoverOpenDelay	Delay before opening, in ms.
padding	Responsive<Spacing>config	config.defaults.padding	Inner padding, from the spacing config. Accepts a scalar or breakpoint map.
placement	Placement	'bottom'	Preferred side. Flips when there isn't room.
radius	Radiusconfig	config.defaults.radius	Corner radius, from the radii config.
ref	Ref<Element>