09Tooltip

Context that shows up on demand.

Hover or focus the pipeline nodes in the strip below: layered detail without crowding the layout. Then a Radix-powered panel for the same progressive disclosure in UI chrome.

2Tooltip modes
5Pipeline nodes
⌘/Keyboard friendly
RadixPrimitive

Field note · Tooltip lab

System thinking · tooltips on

How I think in systems.

Same pipeline strip as the reference home: peek at details per node via hover or keyboard focus.

v1.0

Frontend → API → Database → Automation → Reporting

Hover · focus · reveal

Radix layer

Pointer, focus, escape: predictable overlays.

Ported styling from the reference tooltip primitive: compact chrome, inverted surface, sensible motion. Useful for icons and cramped toolbars without teaching users a new pattern.

Live triggers

Try hover and Tab focus

Behaviour

  • Delay & skip fluency: avoids tooltip spam while scanning.
  • Dismiss: Esc closes the layer when open.
  • Ports: matches Radix Recommended patterns used in production sidebars elsewhere.

Pipeline section above stays pure CSS for performance on dense grids; Radix shines when you need collision-aware positioning and portals.

Open toolkit inventory

Fin

Layout and behaviour aligned with reference b_vgKjNjVFfg5: toolkit-class hero strip, animated connector, and inverted Radix overlays.