Web Application Tooltips and Hints Design
Tooltips are the smallest component in a design system and one of the most often done incorrectly. Typical problems: text too long, wrong positioning, inaccessible for keyboard users and touch devices.
Tooltip vs Popover: The Line
Tooltip — text only, only on hover (and keyboard focus), no interactive elements inside, disappears when cursor leaves. Used for:
- Icon captions without text label
- Abbreviation explanations
- Hints for disabled elements (why button is unavailable)
Popover — can contain a form, links, buttons. Opens on click, not on hover. Stays open until explicitly closed. This is already a different component.
On touch devices, hover doesn't exist — tooltip with hover trigger is inaccessible on mobile. Solutions: replace with Popover with tap trigger, add inline hint under field, or abandon tooltip in favor of another pattern.
Anatomy and Parameters
Tooltip structure:
- Container: background
#1F2937(dark) or#F9FAFB(light), border-radius 4–6px, padding 6–10px 8–12px - Text: 12–13px, white on dark / gray-900 on light
- Arrow (caret): 6–8px, points at trigger
- Maximum width: 200–280px with word wrap
Style variants:
- Dark tooltip (dark background) — universally works on any background
- Light tooltip (light background + border) — for dark interfaces or for emphasis
- Rich tooltip — with title and icon, for more detailed hints (on the border with Popover)
Positioning
12 positions similar to Popover: top/bottom/left/right × start/center/end. Default — top-center. Flip logic: if tooltip goes outside viewport, automatically switches to opposite side.
In Figma: Component with Variants by direction. In code: libraries @floating-ui/react (modern standard) or Tippy.js / Radix UI Tooltip automatically handle positioning and flip.
Appearance and Disappearance Delay
Tooltip shouldn't appear instantly: too sensitive to accidental hovers. Recommended parameters:
- Delay show: 300–500ms
- Delay hide: 100–150ms (slightly slower to have time to move cursor to tooltip itself for text copying)
Animation: opacity 0→1, duration 150ms, ease-out. Without transformations — tooltip is small, animation movement isn't needed.
Form Field Hints
Separate pattern — hints in forms. This is not a tooltip but inline text under the field. Three variants:
- Helper text — constant hint under field (format, limits)
- Validation message — error or success after validation
- Character counter — character count for limited fields
In design it's important to maintain hierarchy: helper text — gray, error — red, success — green; all in one place (don't jump between tooltip and inline).
Timeline
Design of tooltip and hint system (tooltip, rich tooltip, field hints, all positions and states) — 1–2 days: all component variants in Figma with auto layout, animation specifications, usage rules.