Tooltip

Short hints on hover and focus.

import { Tooltip } from 'components/UI/Tooltip'

Sides

Keep the default top side. Pass side to Tooltip.Popup when the tooltip covers nearby content. The arrow moves to point at the trigger.

On icon buttons

Use a tooltip to name an icon button. The button shows no text, so the tooltip tells sighted users what it does. Use the same text as the aria-label.

Open delay

A tooltip opens at once. Pass delay to Tooltip.Trigger to wait first.

Without an arrow

Set showArrow to false for a plain tooltip box.

Usage

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

Choose the component from the trigger and the content. A hover card on a trigger that is not a link hides its content from touch users, so use a popover there.

Component	Trigger	Content	Opens on
Tooltip	Any control	A short text label	Hover, focus
PreviewCard	A link	A rich preview of the link target	Hover, focus
Popover with openOnHover	Not a link	Rich content, with or without controls	Hover, click, tap, keyboard

Touch users cannot hover, so never put the only copy of important information in a tooltip.
Do not put links or buttons in a tooltip. Use a Popover.
Wrap nearby tooltips in Tooltip.Provider, so the next one opens at once.

API

Props that the library adds. Every part also takes all the Base UI props.

Tooltip.Trigger

Prop	Type	Default	Description
delay	number	0	How long to wait before the tooltip opens on hover, in milliseconds.

Tooltip.Popup

Prop	Type	Default	Description
sideOffset	number	8, or 4 with no arrow	The gap between the trigger and the tooltip, in pixels.
showArrow	boolean	true	Shows the arrow that points to the trigger.
container	HTMLElement \| ShadowRoot \| RefObject \| null	–	The element that the tooltip renders into. The default is the document body.