Components
Tooltip
Hover- and focus-triggered label that floats beside an element, with delay and arrow.
Tooltip shows a short, non-interactive label when the user hovers or focuses
its child element. It opens after a short delayMs, portals the label with an
arrow pointing at the trigger, sets role="tooltip", and closes on mouse leave,
blur, or Escape. Wrap exactly one focusable element and pass the label via
content. Use it for icon-button hints and terse explanations — not for
clickable content.
Example
Preview
import { Tooltip } from '@officina/ui';
<Tooltip content="Archive" side="top">
<button aria-label="Archive">📁</button>
</Tooltip>;API
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | ReactElement<unknown, string | JSXElementConstructor<any>> | — | The single trigger element the tooltip is attached to. |
| align | enum | center | Alignment along the chosen side. |
| delayMs | number | 200 | Hover open delay in milliseconds. |
| disabled | boolean | — | Disable the tooltip entirely. |
| side | enum | top | Preferred side to position against the trigger. |
| sideOffset | number | 6 | Gap in pixels between trigger and tooltip. |