Floating toolbars
Contextual editing surfaces have quietly become the default way people format text on the modern web. Instead of crowding the chrome with every possible action, the editor waits — and only when you make a selection does the relevant set of tools surface, anchored to the words you actually care about.
The pattern goes by many names: bubble menu, hover toolbar, floating toolbar, selection menu. The mechanics are the same. Listen for selection changes, measure the bounding rectangle of the active range, and render a small pill of buttons just above it. When the user clicks elsewhere or the selection collapses, the toolbar dismisses itself.
Notion popularized the approach for documents, but it shows up anywhere users compose rich text — comment fields, knowledge bases, the address bar of a code editor. Each implementation is a small variation on the same trick: keep the canvas calm and let the toolbar appear only when it has something to do.
What makes one feel right
A good floating toolbar is fast, predictable, and never blocks the text you're working with. It appears above the selection by default, flips below when there isn't enough room, and stays put while you reach for it. Crucially, clicking a button must not collapse the underlying selection — otherwise every action becomes a two-step dance.
Mechanics worth getting right
- Anchor the toolbar to the live selection rectangle, not the caret. The rectangle moves naturally as the selection grows.
- Use
onMouseDownwithpreventDefaulton the toolbar so clicks don't move focus or kill the range. - Fade the toolbar in over ~150ms. Anything longer feels heavy; anything snappier looks broken.
The best UI is the UI you don't notice. Floating toolbars work because they vanish the moment you stop needing them — leaving the page exactly as you found it.
There's a deeper lesson here about progressive disclosure. Affordances don't have to live on the page forever. They can arrive when the user's intent becomes clear, do their job, and slip away. Done well, the canvas feels lighter and the controls feel more capable, both at the same time.
Try selecting a sentence anywhere in this document. The toolbar above will track your range and offer the formatting actions you'd expect — bold, italic, link, highlight, and a slot for leaving a comment. None of it ships data anywhere; it's a sketch, not a product.