Overlays
Tooltip
Hover/focus label for pointer devices — and nothing at all on touch, by design.
Tooltip
import { Tooltip } from '@anomalia/ui'; Notes
- Renders nothing on touch devices: a tooltip there either never appears or hijacks the tap.
- Never put information only in a tooltip. It is a hint, not a label.
- Opening is delayed, closing is not — a cursor sweeping a toolbar should not fire a row of tooltips.
Examples
Basics
Hover or focus a button. On a touch device this renders nothing at all — which is why the information here is never the only copy of it.
API
| Prop | Type | Default | Description |
|---|---|---|---|
content | string | — | Tooltip text. |
placement | Placement | 'top' | Preferred side. |
delay | number | 600 | ms before it appears. |
Every component also forwards the native attributes of its root element, plus class, so anything not listed here still works.