Overview

Floating tooltip

One shared hint that follows the pointer and slides between triggers.

Get started

Move along the toolbar, or press Tab to reach it and Esc to hide the hint.

Principles

  • Share one popup. Nearby triggers share one tooltip, so moving along a toolbar slides it across instead of closing and reopening it.

  • Follow the pointer on a spring. It trails the pointer with a little weight, below and to the right, and never jumps.

  • Anchor to keyboard focus. Keyboard focus places it on the element, and Escape hides it.

  • Treat touch as touch. A touch is not hover, so touch input never opens it.

  • Hold only a hint. It describes its trigger through aria-describedby and never holds controls or required instructions.

  • Stay inside the window. It keeps a margin from every edge of the viewport.