BACK
Use casesHover intent — a menu without accidental opens
Use cases · 56

Hover intent — a menu without accidental opens

Pattern

A mega-menu, tooltip, or popover on hover. They open not instantly but after a short delay — so that a quick sweep of the cursor through the area does NOT open them. Only on a deliberate pause of the mouse.

The problem it solves

An imperative setTimeout(open, 200) on mouseenter without a proper clearTimeout on mouseleave — the menu opens even after the user has left the area. That's annoying.

Operators and why they matter

  • switchMap(() => timer(N)) — on each mouseenter, create a new timer. A new enter cancels the previous one.
  • timer(N) — the delay before opening.
  • takeUntil(mouseLeave$) — if the cursor left during that time, the timer is cancelled. The menu won't open.
  • mapTo('open') — a successful timer firing = the open command.

Gotchas

  • delay without takeUntil — the menu opens even after mouseleave. The classic bug.
  • mergeMap — each mouseenter creates a parallel timer. With fast cursor movement you get a pile of simultaneous opens.
  • Too long a delay (>300ms) — the menu feels broken. The user thinks hover isn't working.

What you get

The menu opens only on a deliberate, sustained hover. Accidental cursor sweeps are ignored.

script.ts // TypeScript
CONSOLE · Console output
Hit Run to see the result...