Tooltip Lab

One tooltip component for desktop (hover to peek, click to pin) and touch (tap to toggle). Dismiss with Esc, an outside tap, or scrolling on touch.

Four sides

Tooltip on the top Tooltip on the right Tooltip on the bottom Tooltip on the left

Real-world patterns

Settings Save your work⌘S Search everything⌘K

Essential info belongs in the UI, but a toggleable tooltip still gets it to touch users: see the pricing page14-day free trial, no credit card required and this inline termA plain span works as a trigger too with extra context.

Edges, clipping & long content

Prefers right — flips if it would leave the viewport Prefers left — flips if it would leave the viewport

Scroll me. The tooltip below uses position:fixed, so it escapes this overflow:auto box.

On touch devices, scrolling dismisses any open tooltip.

Not clipped, and follows the trigger on scroll

Keep scrolling to watch the bubble track the button (mouse environments) or close itself (touch).

Padding paragraph so the box actually overflows.

Padding paragraph so the box actually overflows.

Padding paragraph so the box actually overflows.

Tooltips wrap at a maximum width instead of stretching across the whole screen, which matters a lot on small phones where the viewport is narrow.

Stress: many instances