Open by hover, by tap and by keyboard focus
Twelve monthly dots are focusable. A line of 365 days would not be: see the build, where one focusable chart uses the arrow keys.
A tooltip shows the exact numbers of one mark on demand. This topic builds one that stays on screen, opens by tap and by keyboard focus, shows missing values honestly, and never holds the only copy of a number.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write place(ux, uy, w, h, boxW, boxH) as a pure function that returns { left, top } and test it on the points (10, 5), (620, 130) and (320, 130) with a 130 by 40 tooltip in a 640 by 260 box.
Add a direct label "Peak: 4,380" to the line chart so the highest day is readable without any interaction.
Explain it without notes
Why measure the tooltip after unhiding it?
Why textContent and not innerHTML for a tooltip?
Name three ways a reader can reach a tooltip, and what event each uses.
Preview
Console
Nothing logged yet.Expected console output
start | hidden
Tab to Jan | shows Jan: 43,439 rides
Tab to Feb | shows Feb: 44,343 rides
Escape on Feb | hidden
focus leaves | hidden
finger taps Jul | shows Jul: 117,803 rides
finger lifts | shows Jul: 117,803 rides
finger taps Aug | shows Aug: 108,806 rides
finger taps the empty chart | hidden
mouse enters Sep | shows Sep: 92,354 rides
mouse leaves | hidden
marks you can reach with Tab: 12