Tooltip

Interactive

See Tooltip in Storybook for every variant, with live controls.

A hover/focus hint. Wraps the element it describes.

import { Tooltip, IconButton } from "@kairosis/eidos";

<Tooltip label="Re-run" side="top">
  <IconButton icon="refresh-cw" label="Re-run" />
</Tooltip>;

Props

Prop	Type	Default	Description
label	ReactNode	—	Required. The hint
side	"top" | "bottom" | "left" | "right"	"top"
children	ReactNode	—	Required. The trigger

Guidelines

• Opens on focus as well as hover, so keyboard users get the same hint.
• The tip is pointer-events: none — it can't be hovered, so it never traps the cursor.
• Position is CSS-only, with no collision detection: near a viewport edge, pick a side that fits.
• Never put essential information here. It's a hint, not content — it's unavailable on touch and invisible to anyone not hovering.
• A tooltip is not a label. IconButton still needs its own label.