Main Character — tooltip

Tooltip

One card for every title in the app. The browser's own tooltips come late, small and unstyled; this one is a --bg-raised card in the UI face, in full --text-default for contrast. Nothing to add per control: a title is enough, and tooltip.js takes it over on first hover or focus.

The card

Sized to its text up to 16rem, then it wraps. Drawn here in place with .tooltip, the same rule as the live #tip.

Try it

Point at or tab to these. The rule of placement is one rule: above the control by default, below it when there is no room above (the first row under the header), above again for the sticky bottom bar. It never covers the pointer. Opening a popover or menu closes it; so does Escape, a click, or a scroll.

Anatomy

div#tip.tooltip[role=tooltip]   one per page, made by tooltip.js
  text                          the control's title, moved to data-tip

card

--bg-raised, --border-default hairline, --radius-base, padding .4rem .7rem, a soft 0 6px 18px shadow at 25% black. max-width 16rem.

text

UI face .8rem/1.4 in --text-default, left-aligned, never uppercase or tracked even when its control is.

place

.45rem from the control, kept 8px inside the window. Above unless there is no room.

Tokens

Fill --bg-raised; rule --border-default; text --text-default; radius --radius-base; the shadow is a literal. In Figma: Tooltip, lines (one, wrap), with a text property. Placement is behaviour, so it isn't a variant: put the card where it would go.