Overlays.
Things that open over the page: a menu, a definition, a hint. Each opens where it was asked for, closes with Escape or a click elsewhere, and returns focus to whatever opened it.
Definition tooltip.
A dotted underline on a word that needs defining, and one sentence under it on hover, keyboard focus or a tap. The note hangs below the nearest positioned ancestor, so the caller decides what it hangs under, and align keeps it on the sheet at an edge. Used for the calculators’ terms, where a reader asks “what is in this?”
import { Term } from "#/ui/site/drawing-cost/pieces";
// The note hangs under the nearest positioned ancestor.
<div className="relative ...">
<Term note="The year's engineering time divided by the drawings released." align="center">
Each drawing
</Term>
</div>Menus.
The nav’s menus open on hover, a click or focus, as one full-width sheet under the header that crossfades between menus; the trigger turns ink and its chevron turns over. Escape, a click outside or leaving the header closes it.
The logo’s menu opens on a right-click: right-click the Drafter logo at the top of this page. It copies the logo or the mark as SVG, downloads the brand assets and opens the guidelines. Arrows, Home, End and Escape work as in any menu, and Shift with the right-click still gives the browser’s own.
Hint bubble.
An ink pill with a pointer glyph, for the one thing a visitor might not know they can do, like the live demo on the homepage. It arrives late and soft, and blurs out the moment the visitor does the thing.
import { HintBubble } from "#/ui/site/hint-bubble";
<HintBubble state={interacted ? "gone" : "shown"}>Click to interact</HintBubble>Dialog.
The site has one, the team card on the careers page, and it is a native dialog: the browser traps focus, Escape closes it and the page behind goes inert. If a second is ever needed, it is a native dialog too.
Best practices.
Do
- Open an overlay where it was asked for, and anchor it to its trigger.
- Close on Escape and on a click outside, and hand focus back to the trigger.
- Keep a tooltip to one sentence; anything longer belongs on the page.
- Use the native dialog element for anything modal.
Don't
- Do not open an overlay the visitor did not ask for.
- Do not put an action inside a tooltip.
- Do not stack overlays.
- Do not hide the browser's own right-click menu anywhere but the logo.