TextInteractionCSS

Text highlight toolbar

Selection positions an anchor; the popover opens after ~2.5s. CSS uses anchor-scope, position-area, try-fallbacks, and anchors-visible, with fallbacks in globals.css.

Preview

Notes · Draft

On small tools and sharp edges

About four minutes

Most interfaces ask you to click; fewer ask you to drag; the interesting ones treat a highlight as visible intent, and put the control where that intent lives so the tool feels inevitable. This preview uses anchor-scope, a delayed popover tied to the selection with showPopover and a source element, position-area and margin unset, try-fallbacks, and anchors-visible, with simpler fallbacks where anchor APIs are missing. After you select text, the bar appears in about two and a half seconds—Escape dismisses it, and scroll or resize keeps it aligned while the range stays active.