✨ (grapher) fixed tooltip position on mobile / TAS-520

[sophiamersmann]

Makes it so that mobile tooltips stick to the bottom (see screenshot below).

Notes:

• If the tooltip content is taller than the allowed max-width, then the tooltip becomes scrollable (that's why the tooltip stays on screen even after an interaction has ended; the tooltip can be dismissed by clicking anywhere on the screen)
• For tooltips that have a "total" row (e.g. stacked area charts), the total row is moved to the top for mobile tooltips (so that it's visible by default, even if the tooltip is scrollable)
• Tooltips are automatically dismissed when the Grapher is scrolled out of view
  • This works by utilizing Grapher's intersection observer. There was a weird bug on iOS Safari where the intersection observer simply didn't fire when Grapher was out of view. For some reason, that doesn't happen if the threshold is set to some small number (instead of 0, which is the default)
  • Ideally, I would want to dismiss tooltips a bit earlier, but I didn't want to set up a second intersection observer just for that...
  • Note that previously, after scrolling a Grapher into view, we would disconnect the intersection observer. Now, we keep it around – I don't think this should be a problem, but wanted to mention it.

To do:

• Map tooltips are broken

[sophiamersmann]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• 🎉 (grapher) add a globe view / TAS-516 #3589
• ✨ (grapher) fixed tooltip position on mobile / TAS-520 #3679 👈
• ✨ (grapher) prevent scrolling while showing tooltips / TAS-528 #3678
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @sophiamersmann and the rest of your teammates on Graphite

[owidbot]

Quick links (staging server):

Site	Admin	Wizard

Login: ssh owid@staging-site-mobile-tooltips-fixed

• Site-screenshots: https://github.com/owid/site-screenshots/compare/mobile-tooltips-fixed
• SVG tester: https://github.com/owid/owid-grapher-svgs/compare/mobile-tooltips-fixed

SVG tester:

Number of differences (default views): 1342 (fc5a7d) ❌
Number of differences (all views): 685 (00cf2c) ❌

Edited: 2024-06-24 09:45:06 UTC
Execution time: 1.19 seconds

[notion-workspace]

Fixed tooltip position on mobile

[sophiamersmann]

Good to go once map tooltips are fixed. To be continued...