When to use

  • To keep extra information off the screen but accessible (through progressive disclosure).
  • To add context to a given screen.
  • To add explanations to visuals such as icons.

When not to use

  • For small bits of information connected to a single action—use a dialog.
  • For large and/or structured content—use a modal.
  • For small interactions or choices—use a popover.
  • To add hidden information to the screen itself—use a collapse.

Component status


Content structure


Indicate the tooltip is present

Explain disabled actions

Select a flight before continuing.
Enter a valid passport number.
Earn $50 in credits before cashing out.
You can’t currently click this button because you haven’t yet selected a flight.
The passport number you entered didn’t pass our validation checks.
You must have accumulated at least $50 in credits before you’re able to cash out the credits into your bank account.

Stick to non-interactive elements


Keep it simple

Look & feel

Desktop vs. mobile