A tooltip that flips at the edges
The three events are sent by the page, so the output never changes. In the editor, hover the chart for real.
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
2025-01-01 | Wed 1 Jan 2025: 1,193 rides | tooltip left: 56 top: 134 | naive right edge: 219 of 640 | inside: true
2025-07-18 | Fri 18 Jul 2025: 4,380 rides | tooltip left: 371 top: 30 | naive right edge: 526 of 640 | inside: true
2025-12-31 | Wed 31 Dec 2025: 910 rides | tooltip left: 449 top: 148 | naive right edge: 799 of 640 | inside: true