A tooltip that flips, and a native popover menu
The Edit button sits at the top edge, so its tooltip flips below; Share has room above. The tooltip appears on focus as well as hover. The Menu uses the popover attribute: click outside or press Escape to close it.
Overlays float above the page, so they must escape clipping and stacking (portals or the browser's top layer), manage focus (trap it in modals, return it on close), dismiss predictably (Escape, outside click), position themselves next to their trigger without leaving the screen, and, for toasts, queue up, time out and pause while the user reads.
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 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add a type ("success" or "error") to the toast system; errors use role="alert" and don't auto-dismiss.
Make the tooltip also shift sideways so it never goes past the right edge of the window.
Explain it without notes
Why do overlays need portals or the top layer?
What does <dialog>.showModal() give you, and how do you use it from React?
Design a toast system: API, queueing, timing and accessibility.
How do you position a tooltip so it stays on screen?
Preview
Console
Nothing logged yet.Expected console output
Edit tooltip placed on bottom
Share tooltip placed on top
Menu open: true