Pinned tooltip & live editing

Press Space to pin. The tooltip stops following the cursor and becomes a four-tab editor.

Pinning

With the extension active, hover an element and press Space. The tooltip locks to that element and gains four tabs. Press Esc to unpin. While pinned, the arrow keys walk the DOM (parent, child, siblings) without breaking the pin.

The four tabs

CSS

The live-editable rule list. Click any value to type, paste, or use the native color picker. ↵ applies, Esc cancels. Each edited row gets a revert control, and there is a revert-all in the footer. Edits stay until you reload the page.

Contrast

WCAG ratio for the element's text against its background, with AA and AAA pass or fail badges and a preview swatch.

Box

The box-model diagram: margin, border, padding, and content layers with computed dimensions.

Tree

The ancestor chain. Click any row to retarget the tooltip to that ancestor without leaving pinned mode.