Gallery

Design a tooltip component that explains a control or term without interrupting the page. Treat it as a small, contextual layer anchored to a trigger, not a floating note. The tooltip should read instantly, point to its source, and disappear without leaving visual noise behind.

Show the trigger in hover and focus states, then design the tooltip itself in at least four placements: top, right, bottom, and left. Include the arrow, padding, max width, and text wrapping behavior. The tooltip should stay clear against busy backgrounds and avoid covering the thing it describes.

Account for real usage: long labels, short labels, and copy that needs two lines. Add a touch-friendly version for click or tap, plus a dismiss state for persistent tooltips. If the tooltip has motion, keep it subtle and fast; the content should feel like it appears in place, not like a new panel opening.