Design Pattern

Tooltip

A tooltip is a UI pattern that displays a short piece of supplementary information when an element is hovered or focused. Because it is easy to confuse with a Toggletip, you need to distinguish them by trigger and by what content is allowed.

Difficulty: Intermediate Category: Information Display

When to use / not use

Use it when

  • When you want to attach a short description to an icon button
  • When you want to briefly explain an abbreviation or technical term
  • When you want to show supplementary hints for a form field

Don't use it when

  • When conveying important information → use always-visible text
  • When you need to include links or buttons → use a popover or dialog
  • On mobile-first UIs where hover is unreliable

Anatomy

1 Trigger element (target for hover / focus)
2 Tooltip body (supplementary text)
3 Arrow (optional)
  1. Trigger element — References the tooltip with aria-describedby
  2. Tooltip body — A short text region with role="tooltip"
  3. Arrow — A visual helper that indicates the relationship with the trigger

HTML Structure

Difference between a Tooltip and a Toggletip

  • Tooltip — Shown on hover or focus. Meant for supplementary descriptions
  • Toggletip — Toggled visible by click or key press. Also needs state-change notification

Key points

  • The trigger must be focusable
  • Don't put interactive elements inside a tooltip
  • Keep the content short; use another pattern for long explanations
  • Consider offering a way to dismiss with Escape

CSS Implementation

Positioning and styling

  • Position it relative to the trigger
  • Smooth the show/hide with opacity and transition
  • Draw the arrow with pseudo-elements or a border trick
  • Combine with :focus-visible to support keyboard operation

Accessibility

WCAG 4.1.2 Name, Role, Value

role and aria-describedby show the relationship between the trigger and the supplementary description programmatically.

WCAG 1.4.13 Content on Hover or Focus

Content revealed on hover or focus needs a design for dismissibility and persistence.

WCAG 2.1.1 Keyboard

It must be shown on focus, not only on hover.

Keyboard operation

  • Focusing the trigger with Tab reveals the tooltip
  • Dismiss the tooltip with Escape
  • Toggletips are toggled with Enter or Space

Live Demo

Hover tooltip

A simple hover-only tooltip built with CSS only.

PreviewFullscreen

Focus-aware tooltip

An accessible implementation that also appears on keyboard focus.

PreviewFullscreen

Toggletip

A supplementary-info pattern that is toggled explicitly.

PreviewFullscreen

Common mistakes

Putting interactive elements in a tooltip

A UI that disappears on hover-off can't host links or buttons reliably.

Not shown on keyboard focus

If it's hover-only, keyboard users can't reach the supplementary info.

Can't be dismissed with Escape

Satisfying WCAG 1.4.13 requires providing a way to dismiss it.

Placing essential information only in a tooltip

Tooltips are for supplementary info; required information must not live there alone.