All components
Feedback
Tooltip
stable
Since 1.2
Contextual hint with a required title, an optional secondary description, aligned placements, an arrow, and hover delay — shown on hover and focus on web, long press on native.
Feedback
primitive
Display
Documented
import { Tooltip } from '@ivim/native/components';
When to use
Use when
An icon-only control needs its meaning spelled out for sighted users.
A truncated or abbreviated value needs its full form on demand.
Don't use when
The information is required to complete the task — put it in visible text; a tooltip can be missed entirely.
The content is interactive — use Popover, since tooltip content is not reachable.
The trigger has no accessible name of its own — fix the name rather than adding a tooltip.
Playground
Adjust the controls to preview live prop combinations. The code snippet updates to match the current selection.
placement
placement
top
bottom
top-start
top-end
bottom-start
bottom-end
Arrow
arrow
Disabled
isDisabled
Title
title
<Tooltip title="Adds a new member" />
Example
Preview
Code
Placements and content
Default (top)
Bottom, with an arrow
Title and description
Aligned to the start edge
Hover or long-press me
With a hover delay
Delayed hint
Disabled (no bubble)
No tooltip here
Platform adaptations
Untitled UI’s tooltip is a hover affordance. Hover does not exist on touch, so this implementation adds long press, and adds focus activation on web so the hint is not mouse-only. Independently of either, the trigger carries the hint as `accessibilityHint`, so a screen-reader user hears it without performing any gesture.
Anatomy
The parts that compose this component.
1
Trigger
The described element. Carries the hint as accessibilityHint.
2
Bubble
The floating hint, pointer-transparent so it never blocks the trigger.
3
Title
Required primary line.
4
Description
Optional secondary line, shown below the title.
5
Arrow
Optional pointer toward the trigger.
Guidelines
Do
Treat a tooltip as an enhancement — the trigger must already be usable and named without it.
Do
Keep the content to a short phrase; a tooltip disappears on any interruption, so long text will be lost.
Do
Use delay for tooltips on dense rows, so pointer movement across the surface does not flash them.
Don't
Put a link, button, or form control inside a tooltip — it cannot be reached.
Don't
Rely on hover alone; on touch there is no hover, and many people never discover long press.
Props
Public props for this component. Required props are marked; defaults reflect the component implementation.
title
required
ReactNode
Primary hint text.
description
ReactNode
Optional secondary detail, shown below title.
placement
'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'
default: 'top'
Bubble position relative to the trigger.
arrow
boolean
default: false
Draws a pointer toward the trigger.
delay
number
default: 300
Milliseconds before showing on hover (web).
isDisabled
boolean
default: false
Suppresses the bubble entirely.
Deviations from Untitled UI
Where this component deliberately differs from Untitled UI's API, and why. These are kept choices, not gaps to close.
Untitled UI
12 placements incl. `left` / `right`
Ours
6 top/bottom placements
Horizontal placements are rarely usable on narrow screens; the overlay positioner supports top/bottom flipping only.
Accessibility
Roles and screen-reader behavior this component provides, plus keyboard interactions.
•
The trigger carries the hint as accessibilityHint, so assistive tech reads it without hover or long press — the gesture is a sighted-user affordance, not the only path.
•
Web activates on hover *and* keyboard focus; focus activation is not optional, or the hint is mouse-only.
•
Native has no hover, so the bubble shows on long press.
•
The bubble is pointer-transparent and non-interactive; content that needs interaction belongs in a Popover.
•
A title is prefixed to the hint text, so both lines are announced as one phrase.
Tab
Focuses the trigger, which shows the tooltip on web.
Shift + Tab
Moves focus away, hiding it.
Platform & RTL
Behavior that differs across the platforms this component runs on.
Web
Shows on hover and on keyboard focus, with an optional delay.
iOS
No hover exists, so the bubble shows on long press; VoiceOver reads the hint directly.
Android
Long press, matching iOS; TalkBack reads the hint directly.
RTL
Start and end placements mirror with the writing direction.
State coverage
Interaction and visual states this component supports.
base
semantic color
density
Token references
Semantic design tokens this component page exercises. Tap one to edit it live.
Related components
Components that solve adjacent problems or compose with this one.
Menu
Action menu owning its trigger and overlay, with sections, icons, shortcuts, destructive items, and a Popover for interactive content.
Utility buttons
Icon-only actions and dismiss controls: IconButton with variant, tone, size, and loading, plus regular and inverse CloseButton.
Input
Single-line text entry, with TextField for labelled fields and InputGroup for adornments, prefixes, and attached controls.
Badge
Compact status or metadata label with six semantic tones plus seven non-semantic accent tones, four treatments, a pill or square shape, three sizes, dots, counts, adornments, and optional press and remove actions.