Components / Overlays

HoverCard

A passive preview beside its anchor, such as a larger thumbnail of the page under the pointer.

Previews the hovered item

When to use

A bigger look at something small (a page thumbnail, an image, a colour) while it is hovered or focused.

Use something else when:

tsx

import { HoverCard } from "@arshad-shah/cynosure";

<HoverCard open={hovered !== null} anchor={thumbRef}>
  <img src={large} alt="" />
</HoverCard>

You decide when it shows: open it on pointer enter and on focus, so keyboard users see the same preview.

Every prop of HoverCard
Prop	What it does	Type	Default
`open`Required	Show it. The owner decides when: a hovered row, a focused thumbnail.	`boolean`
`anchor`Required	What it previews: a ref to an element, or a virtual anchor.	`FloatingAnchor`
`placement`	Preferred side; it flips when there is no room and slides to stay on screen. Default `end`.	`Placement`	`end`
`children`	The preview (a larger thumbnail, a summary). Nothing in it can be clicked or focused.	`ReactNode`
`className`	Added to the root element, for layout.	`string`
`style`	Layout only. Restyle through --cy-hover-card-* tokens.	`CSSProperties`

Generated from the type definitions in @arshad-shah/cynosure 0.5.0.

Passive: aria-hidden, inert and pointer-events: none. The pointer passes through it and focus never enters it; it repeats what the anchor already names, so nothing is lost to screen readers.
Placement: on the placement side, flipping when there is no room and sliding to stay inside the viewport.
Isolation: top layer through the Popover API, rendered in place, so it works in shadow roots and above any z-index.

Flips when there is no room

Tokens: --cy-hover-card-background, --cy-hover-card-radius, --cy-hover-card-padding and --cy-hover-card-offset.

These examples run Cynosure 0.5.0 (commit 50ce30b), the version on npm.