Tooltip | Lime design system

Examples

Names an icon button

A row of icons

When to use it

Use: An icon button with no visible text.
Use: A truncated label, where the tooltip shows the full text.
Use: A disabled control that stays focusable, where a short reason helps.
Not for: A button that already has a text label; the tooltip repeats it.
Not for: Anything with a link, a button or more than one sentence. Use Popover.
Not for: A list of commands. Use Dropdown menu.

8 rules

Must: Give an icon-only trigger an aria-label with the same words as the tooltip. Because the tooltip is not the button's name, so a screen reader reads only "button".
Never: Add a tooltip to a button that has a visible label. Because it repeats the label in an ink chip that covers what sits above the button.
Should: Write a verb and its object in sentence case with no period.
Never: Put a link, button or second sentence in a tooltip; use Popover. Because touch never opens it and Tab moves focus past it, so the link cannot be reached.
Should: Keep the label under about 30 characters; the chip wraps at 256px.
Must: Wrap the app or a button group in one TooltipProvider. Because a shared provider opens the next tooltip at once, where separate ones each wait 400ms.
Must: Never rely on the tooltip alone; the button name must carry the meaning. Because touch never opens a tooltip, so on a phone the name is all there is.
Should: Keep a disabled trigger focusable with focusableWhenDisabled when the reason matters.

4 checks

: The tooltip opens on keyboard focus as well as pointer rest; Escape closes it.
: The trigger is named by aria-label; the tooltip only shows the same words to sighted people.
: Touch never opens it.
: The chip is a fill with no border, so its edge may drop in forced colors.

7 edge cases

Long label: Wraps inside 256px and breaks long unbroken strings.
Right to left: Start and end sides follow the reading direction.
Reduced motion: The chip appears at once.
Near a viewport edge: The chip flips or shifts and keeps 8px inside the screen.
Sweeping a row of buttons: The first waits 400ms; the next open at once with no fade.
Empty content: An empty ink chip; do not render the tooltip.
Inside a dialog or menu: It portals into the Lime scope and renders above.

4 props

TooltipProvider delay: number default 400
TooltipTrigger: Base UI props
TooltipContent side: 'top' | 'right' | 'bottom' | 'left' default 'top'
TooltipContent sideOffset: number default 6

7 tokens