Tooltip

Shows a short label or an exact value next to the thing it describes.

Live React portWildTooltip.vueFeedback/TooltipWTooltip

Try it

Change the position to turn the arrow, and the tone to suit the surface underneath.

Position

Text

Tone

<WildTooltip
  text="14 minutes ago"
  position="top"
/>

Use a tooltip to name an icon button, or to give the exact value behind a rounded one.
Use it for the timestamp or unit a dense table had to drop.

Don’t use it

For anything people need to act. Touch screens can’t hover, so put it on the page.
For more than one line, or for a link. Use a popover.

Two, with the same size and arrow, so switching tone never moves the bubble.

dark

light

<WildTooltip text="14 minutes ago" />
<WildTooltip text="14 minutes ago" tone="light" />

Use dark by default. It stands out on white cards, grey rows and map tiles alike.
Use light on a dark or busy ground, such as a chart plot or a satellite map, where a dark bubble would sink into it.
Keep one tone per screen, so every tooltip on it reads as the same thing.

Four. The position is the side of the trigger the bubble sits on, and the arrow points back at it.

top

bottom

left

right

<WildTooltip text="Last reading 14 minutes ago" position="top">
  <WildIconButton icon="info" />
</WildTooltip>

One line. A tooltip that wraps should have been a popover.

Lead with the value, then its unit or time. Leave out the full stop.

Show it on keyboard focus as well as hover, and point the trigger’s aria-describedby at it. A screen reader then reads it after the trigger’s name.

Key	What it does
Tab	Focusing the trigger shows the tooltip.
Escape	Hides it, and focus stays on the trigger.

Prop	Type	Default	Description
text	string	—	The one line it shows.
position	'top' \| 'bottom' \| 'left' \| 'right'	'top'	Which side of the trigger it sits.
tone	'dark' \| 'light'	'dark'	See Tones.

Token	Value	Where it lands
--global-neutral-grey-1300	#0A090B	Dark ground.
--color-white	#FFFFFF	Dark text; light ground.
--global-neutral-grey-1100	#2D2B32	Light text.
--global-neutral-grey-600	#DCDCDE	Light border and arrow edges.
--shadow-dropdown	0 4px 12px rgba(0,0,0,.08), …	Both tones.
--radius-xs	3px	Corner.
(no token)	10px / 14px, 500	Text size, line height and weight.