What goes into the tooltip: missing values, markup, long labels
innerHTML turned part of the name into a real element. With data you do not control, that is how markup injection starts; textContent can never do it.
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
1193 -> 1,193 rides
0 -> 0 rides
null -> no data
undefined -> no data
NaN -> no data
"910" -> no data
1000000000 -> 1,000,000,000 rides
innerHTML : text shown: "Quay & co" | child elements created: 1
textContent: text shown: "<b>Quay</b> & co" | child elements created: 0
long label: width 236 px (220 plus 16 of padding), and the box grows taller: true
without max-width and wrapping: wider than 500 px: true