Design Hover Behavior on Touch Devices
Motion & Interaction · mobile, gestures, tooltips
Updated 2026-07-28
- Never hide anything essential behind hover. Touch has no hover state, so a delete action, a menu, or an explanation that only appears on hover does not exist on half your devices.
- Detect capability rather than screen size. Laptops have touch screens, tablets have trackpads and keyboards, and a phone can be driven by a mouse, so treat hover as an enhancement on any device that has it.
- Give every hover-revealed action a second route:
- Always visible on touch, even if that means a denser card.
- Available from a long press or an overflow menu.
- Present in the item's detail view.
- Beware the sticky hover state. A tap can leave an element looking hovered until the user taps elsewhere, which reads as selected or stuck.
- Replace hover tooltips on touch with something dismissible. A tap that shows an explanation must also be dismissible by tapping away, and must not double as activating the control.
- Do not require precision hovering to keep a menu open. Corridor paths between a trigger and its submenu are a pointer technique with no touch equivalent.
- Test the first tap. On touch, the first tap on a hover-driven element often only reveals it, so users have to press twice to do anything.
Hover is a bonus for people with a pointer, never the only way to reach a function.
Related guides
UX Handbook