Tooltip
Minimal hover tooltip: a line of text that appears above or below any focusable element.
Component behavior
Tooltip names a control that has no visible label. It is hover- and focus-driven, so anything it says is unavailable to a touch user until they commit to tapping.
Use cases
- Labels for icon-only buttons.
- A short clarification that will not fit in the label.
- Keyboard shortcut hints beside an action.
Props
Tooltip wraps a single focusable/hoverable child. It does not use Popover; positioning is relative to the wrapper span.
| Prop | Type | Default | Description |
|---|---|---|---|
content | ReactNode | — | The tooltip text or element. |
children | ReactElement | — | The element that triggers the tooltip on hover/focus. |
side | "top" | "bottom" | "top" | Which side of the child to appear on. |
disabled | boolean | — | Suppresses the tooltip entirely. |
className | string | — | Additional class on the tooltip element. |
anchorClassName | string | — | Class for the tooltip trigger wrapper. Use to override the default inline-flex display. |
Examples
Top tooltip
Bottom tooltip
Icon-only trigger
Disabled
import { Tooltip } from "@solarius/onset";
import { Button } from "@solarius/onset";
<Tooltip content="Save changes">
<Button>Save</Button>
</Tooltip>;