Components / Overlays

FloatingTip

A controlled tooltip that follows the pointer inside a container: for canvas and SVG marks, map features and any hover target you cannot wrap in a Tooltip. It flips at the container edges and never takes pointer events.

@ruckc/truss-ui Overlays

Import

import { FloatingTip } from '@ruckc/truss-ui';

Playground

API

A controlled, pointer-following tooltip for things that are not elements you can wrap: canvas and SVG marks, map features, chart hit-areas. You drive it from your own pointer handlers; it only positions and shows the bubble.

Prop	Type	Default	Description
open	boolean	false	Whether the tip is shown.
x required	number	—	Pointer position in px relative to the top-left of `container` (for a mouse event: `e.clientX - rect.left`, or `e.offsetX` when the event target is the container itself).
y required	number	—
container required	HTMLElement | null | undefined	—	The element the coordinates are relative to. The tip flips to stay inside its bounds.
text	string	—	Plain-text content.
children snippet	Snippet	—	Rich (non-interactive) content; the tip is `pointer-events: none`, so put no links or buttons in it.
id	string	—	Set an `id` so the hovered element can reference the tip with `aria-describedby`.
offset	number	12	Gap in px between the pointer and the tip.