Command Palette

Search for a command to run...

Hectal
Phase 2: Purpose and Principles
Web Animation · Exercise 3 of 5 PreviousNext
Beginner

A tooltip with a grace window

The tooltips always wait 400 ms. Add a grace window: when a tooltip has just closed, a tooltip opened within 300 ms appears at once.

Keep the 400 ms delay for the first one, and keep keyboard focus instant.

What Check tests

  1. The first tooltip appears after about 400 ms, not before
  2. Moving to the next button within the grace window is instant
  3. After the window, the delay is back
  4. Keyboard focus shows it at once

Stuck? One hint at a time

The solution unlocks after your first Check. Try first: that is where the learning happens.

Runs in your browser. Your code is saved here.

Your page

Press Run to see the page.
00:00.000
animations
0.00s0.10s0.20s0.30s0.40s0.50s0.60s0.70s0.80s0.90s

Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.

frames

Console

Nothing logged yet.