Overlays sit on the platform: tooltips are CSS only, menus use the popover attribute, dialogs use <dialog>. That gives Escape to close, focus handling and top-layer stacking for free, fixing the as-is overlays where Escape was ignored and focus fell to the page. Contracts: docs/interactions.md.
Tooltip
Hover (150ms delay) or keyboard focus. For icon-only buttons the tooltip is the accessible name, via aria-labelledby.
Every icon without a label has one (D52)
An icon that stands alone, in a control (an icon button) or in content (an icon in a table cell), always comes with a tooltip naming it. Put data-tip="…" on it: tooltip.js draws one tooltip in the top layer, so no card or table clips it, and only while the element's own label isn't showing (the phone's search, a button folded to its +). The element keeps its accessible name in aria-label. scripts/check-tips.js lists the ones that have none.
Menu
Click the button. Arrow keys move, Escape or a click outside closes and focus returns to the button.
Static, for review:
Dialog
Centred modal for forms and filters; sheet for long pickers (bottom sheet on phones); workspace for the job modal. Escape closes all of them; clicking the backdrop closes the sheet (closedby="any").