Hover Tip

Pointer-following detail panel for canvas viewers.

Preview

About

A canvas viewer can't attach a DOM tooltip to a residue — there is no element to attach it to — so it renders one HoverTip at the cursor instead. It flips to stay on-screen and renders through a portal, so it's never clipped by the viewer's own overflow. The shared detail surface behind every hover readout in this kit.

Usage

import { HoverTip } from "@/components/ui/hover-tip"

<HoverTip x={hover?.x ?? null} y={hover?.y ?? null}>
  {hover && <div>residue {hover.residue}</div>}
</HoverTip>