UI Components

Tooltip

A tooltip is a small note that appears near something to explain it briefly.

Also called Hover textHelp tipPop-up labelLittle explanation bubble

Visual Example

Try it: hover or focus the help button.

Explains a nearby control

Plain Definition

Tooltips work best for short helper text. Important information should usually be visible without requiring someone to hover or focus first.

Use a tooltip for a quick clarification, especially near an icon or compact label. Avoid hiding instructions, errors, or required information inside a tooltip.

You Might Describe This As...

  • "little popup bubble"
  • "tiny hint that appears when I hover"
  • "small help bubble next to an icon"
  • "explanation that appears near a button"

Fast lookup

You May Also Mean

Tooltips can feel like tiny popups, but they are brief helper notes tied to a nearby control, not blocking dialogs.

Popup

Check the name, visual cue, and typical use.

Modal vs Popup

See the practical difference side by side.

What It Is Used For

  • Explaining an icon
  • Showing extra detail without changing the page
  • Clarifying a short label

Example User Phrasing

  • "Add a little hint when someone hovers over the icon."
  • "I need a short explanation bubble for this control."