Contextual formatting toolbar
A small formatting bar that floats next to selected text, putting controls like bold, italic, and link beside the words being edited.
See it
What it is
A contextual formatting toolbar is the small floating row of controls that appears beside selected text. It offers actions such as bold, italic, link, and heading without occupying a permanent toolbar. Medium made the pattern familiar for web publishing, and editors built with Tiptap often call it a bubble menu.
Use one in a focused writing surface where a full formatting ribbon would be noisy. Keep it close to the selection, show only actions that apply in that context, and reflect active formats with pressed states. The browser Selection API supplies the selected range, while a positioning library can keep the toolbar inside the viewport.
Gotcha: clicking a toolbar button can move focus out of the editor and collapse the very selection the command needs. Preserve the range or handle pointerdown without stealing focus, then restore the editor selection before applying the command. Reposition on selectionchange, scroll, and resize, and make every action reachable from the keyboard.
Ask AI for it
Add a contextual formatting toolbar with Tiptap's BubbleMenu extension. Show it only for a non-empty text selection inside the editor, and include bold, italic, inline code, link, and heading controls with aria-labels and aria-pressed states from editor.isActive(). Position the menu above the selection with Floating UI offset, flip, and shift middleware, then update it on selectionchange, scroll, and resize. Prevent toolbar pointerdown from collapsing the selection, restore the saved range before running a command, close on Escape, keep Tab order predictable, and under prefers-reduced-motion show and hide the menu instantly instead of animating its position.