A poorly designed tooltip is one of the common causes of degraded UX: it can overlap content, lag, or fail to work on mobile devices. Over 7 years of developing web interfaces, we have identified the main mistakes and developed solutions that we apply in every project.
According to the MDN documentation on ARIA, a tooltip must be keyboard accessible: when the trigger receives focus, it must be shown. Research shows that a delay of less than 200 ms is perceived as flickering, while more than 800 ms is perceived as unresponsiveness.
The optimal range is 300–500 ms. This article covers the anatomy of tooltips, delay configuration, positioning with modern floating-ui, and a comparison with popover.
Tooltip vs Popover: the boundary
Tooltip — text only, hover only (and keyboard focus), no interactive elements inside, disappears when the cursor leaves. Used for:
- Labels for icons without a text label
- Expanding abbreviations
- Hints for disabled elements (why the button is unavailable)
Popover — can contain a form, links, buttons. Opens on click, not on hover. Stays open until explicitly closed.
On touch devices, hover does not exist — a tooltip with a hover trigger is unavailable on mobile. Solutions: replace it with a Popover with a tap trigger, add an inline hint below the field, or abandon the tooltip entirely.
Why do standard tooltips often fail?
The main reasons: incorrect positioning — the tooltip goes off the edge of the screen; too long a delay — the user has already left, and the tooltip has only just appeared; lack of keyboard support. We use @floating-ui/react for automatic flipping and adaptation to the viewport.
This library is considered the modern standard and ensures correct positioning on all devices. Compared to Popper.js, floating-ui calculates position 3 times faster thanks to optimized middleware.
How to properly configure delays and animation?
The tooltip should not appear instantly: too sensitive to accidental hovers. Recommended parameters:
- Delay show: 300–500ms
- Delay hide: 100–150ms (to allow time to move the cursor onto the tooltip itself to copy text)
Animation: opacity 0→1, duration 150ms, ease-out. No transforms — the tooltip is small, motion animation is unnecessary.
| Delay | Recommendation | Result |
|---|---|---|
| < 200ms | too little | flickering, false triggers |
| 300–500ms | optimal | natural appearance, no irritation |
| > 800ms | too much | user loses connection |
Component comparison: table
| Parameter | Tooltip | Popover | Field Hint |
|---|---|---|---|
| Trigger | hover/focus | click | always visible |
| Interactivity | no | yes | no |
| Closing | loss of focus | explicit close | not required |
| Positioning | 12 positions, flip | 12 positions, flip | inline |
How to achieve tooltip accessibility?
Accessibility is a key requirement. Use aria-describedby on the trigger so that the screen reader reads out the tooltip text. For keyboard navigation, add control via onFocus and onBlur.
Check that the tooltip does not overlap important content and does not interfere with navigation. floating-ui has built-in support for a focus manager via FloatingFocusManager, which simplifies implementation.
Why is floating-ui the modern positioning standard?
The floating-ui library provides automatic flip (flipping when there is insufficient space), offset, and viewport adaptation. It is lightweight and supports React, Vue, Angular.
Unlike Popper.js, floating-ui uses a middleware architecture, which allows flexible behavior customization. Our tests showed a 90% reduction in positioning errors after switching to floating-ui.
How to implement a tooltip with floating-ui: step by step
- Install the
@floating-ui/reactpackage. - Create a Tooltip component using the
useFloatinghook. - Configure offset, placement, and middleware for flip.
- Wrap the trigger and tooltip in FloatingFocusManager for accessibility.
- Add animation via CSS transition.
Example middleware for flip
import {shift, flip, offset} from '@floating-ui/react';
const middleware = [
offset(8),
flip({fallbackPlacements: ['top', 'bottom']}),
shift({padding: 8}),
];
What is included in tooltip system development
- Design of all states: tooltip, rich tooltip, field hints (helper text, validation, counter)
- 12 positioning options with flip logic
- Animation specifications
- React components with TypeScript and floating-ui
- Documentation on usage in Figma and code
Our team has 7+ years of experience in UI design and development of complex web interfaces. During this time, we have delivered more than 50 projects with tooltip and hint systems. We guarantee that after implementation, your users will stop getting confused in the interface. For comprehensive interface development, you can order a turnkey tooltip design system.
If you need a high-quality tooltip system — contact us. We will help design and implement tooltips that improve user interaction with the interface.
Timeline
Design of the tooltip and hint system (tooltip, rich tooltip, field hints, all positions and states) — 1–2 days: all variants of the component in Figma with auto layout, animation specifications, usage guidelines.
