Tooltip

Small floating helper text on hover or focus.
The bubble inverts against the page (dark in the light scheme, light in the dark one) and sets its text in Dark Factory's label type; iOS, which has no tooltip, shows the same bubble, and Android keeps the Material 3 plain tooltip.
The trigger is a boolean axis of its own, resolved first match wins:
  • children, an element you already have (an icon Button, a Chip, any control that owns its own press and accessible name). The child renders as-is and the tip hangs off it through a wrapper that only LISTENS: no accessibility role, no tab stop, and no press of its own, so the child stays the single interactive, labelled element, keeps its onPress, and the tip never toggles on tap. Hover and focus on the child both raise it; the hover region is the whole tooltip, so moving onto the bubble keeps it up.
  • iconTrigger, a ghost icon button carrying a settings glyph.
  • textTrigger, the trigger string as a pressable inline word.
  • Otherwise the default: the trigger string as an outline Button.
Hover and focus are pointer-and-keyboard affordances. Touch pointers are skipped, and iOS and Android never fire hover at all, so on native and on touch the controlled open prop is the way to show a tip: drive it from whatever the platform does offer (a long press, a selected row, an inline help toggle). The built-in triggers additionally toggle on tap; an element trigger deliberately does not, because that press belongs to the child.
iOS
Android
Web
tsx
<Tooltip label="Open settings" trigger="Settings" open />

Props

Prop
Description
children
ReactNode
An arbitrary element for the tip to hang off: an existing Button, Chip, or any other control that already owns its own press and accessible name. The highest-precedence trigger: children win over `iconTrigger`, `textTrigger`, and the default Button. The child renders as-is and stays the single interactive, labelled element; the root view Tooltip wraps it in takes no accessibility role and no tab stop, listens only for hover and focus, and never claims the press, so a Button child keeps its `onPress` and the tip does not toggle on tap.
label
string
The tip text shown in the bubble.
trigger
string
The element the tip describes. By default rendered as a text `<Button outline small>`; set `iconTrigger` for a ghost icon button, `textTrigger` to hang the tip off an inline pressable word, or pass `children` to wrap an element you already have. Ignored when `children` is passed.
iconTrigger
boolean
Render the trigger as a ghost icon button (a settings glyph) instead of the text Button. When set, `trigger` (the label string) is ignored. Ignored when `children` is passed, which takes precedence.
textTrigger
boolean
Render the `trigger` string as a pressable inline word (an underlined hover-text affordance) rather than the default text Button, so the tip can hang off a run of body copy. Orthogonal to placement (top/left/right/bottom). Ignored when `children` or `iconTrigger` is set, both of which take precedence.
open
boolean
Controlled visibility. Omit for uncontrolled: the tip shows while the trigger is hovered or focused, and a tap toggles it (the touch analogue of hover) on the built-in triggers. An element trigger (`children`) has no tap toggle (the child keeps its own press), and native platforms never fire hover, so `open` is the native and touch path for that trigger.
onOpenChange
(open: boolean) => void
Fired when the bubble is shown/hidden.
top
boolean
Placement (pick one; default is top).
bottom
boolean
Placement (pick one; default is top).
left
boolean
Placement (pick one; default is top).
right
boolean
Placement (pick one; default is top).
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Do & Don’t

Short labels

Don’t
Long, essential instructions hidden in a tooltip are missed on touch and by screen readers.
Do
Keep tooltips short and supplementary; put essential steps in visible copy.

top

Don’t
A top tooltip on a trigger near the top edge clips above the viewport and goes unread.
Do
Leave headroom above (or flip to bottom) so a top-placed tooltip stays fully on screen.

right

Don’t
A right tooltip on a control flush against the right edge is cut off by the container.
Do
Keep room to the right, or flip the tooltip to the left when the trigger hugs the edge.

bottom

Don’t
A bottom tooltip sits right on top of the next row, masking the control beneath it.
Do
Give a bottom tooltip clearance so it never overlaps the interactive content below.

left

Don’t
A left tooltip on a trigger at the left edge is clipped by the container's left boundary.
Do
Reserve space on the left, or flip to the right, so a left-placed tooltip is never cut off.
← TextInput
Typography →