Revenue grew faster than planned this quarter, mostly from renewals and a few new accounts.
Select text: the bar over it is a bubble menu; tick rows: the bar below them is a bulk action bar
Bubble Menu vs. Bulk Action Bar
/ <BubbleMenu editor={editor}> · <ActionBar.Root open={count > 0}> /
also called floating toolbar, inline toolbar, formatting toolbar, hovering toolbar, batch action bar, action bar
“Highlighting text makes a menu appear” is a bubble menu (Tiptap's BubbleMenu), and “the box that is on middle bottom on selection” is a bulk action bar (Chakra UI's ActionBar): both exist only while something is selected. The bubble menu is the small strip of Bold, Italic and Link floating just above highlighted words in Notion or Medium (some draw a small tail); Tiptap's floating menu is a different thing, on an empty line. The bulk action bar says how many rows are ticked and floats at the bottom center, or swaps in for the toolbar above the list, as in Gmail. Neither is a right-click context menu or a popover on a button; the bar is not a toast, since it stays while the selection does, and its count is not the “2 selected” inside a multi-select.
If you called it…
…you meant Bubble Menu vs. Bulk Action Bar.
Anatomy — every part, named
- 2Selection count
selectedItemCount“The text that says 2 selected” is the selection count, the label at the start of the bar that says what its buttons will act on.
- 3Clear button
onClearSelection“The x at the end of the bar” is the clear button: it unticks every row, and the bar leaves because nothing is selected.
Prompt — paste into your agent
Build a bubble menu (Tiptap BubbleMenu, or Floating UI anchored to the selection's Range.getBoundingClientRect()): a compact role="toolbar" of Bold, Italic and Link that appears about 10px above the highlighted words only while text is selected, with the active format shown pressed (aria-pressed), flipping below near the top edge. Or build a bulk action bar (Chakra UI or React Spectrum ActionBar): it appears only while at least one row is ticked, reads “2 selected”, holds the actions and a clear button that unticks everything. The bubble's buttons must not take focus from the text (preventDefault on mousedown), and the bar must appear without moving the rows.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my bubble menu or bulk action bar (Tiptap BubbleMenu, Range.getBoundingClientRect(), selectionchange, Chakra UI ActionBar). Rule out: the bubble's buttons taking focus on mousedown so the selection collapses before the click lands; the bubble showing on a collapsed caret because Selection.isCollapsed is not checked; the bubble centered on a multi-line selection's union box instead of its first line; the bubble not flipping near the top edge, clipped by an overflow: hidden ancestor, or not following on scroll or resize; the bulk bar pushing the rows down when it appears; its X hiding the bar while the rows stay ticked; the count going stale or counting only the visible page; the bar re-animating on every tick instead of only at zero. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| Tiptap | <BubbleMenu editor={editor}> | the menu that appears next to selected text |
| Chakra UI | <ActionBar.Root open={count > 0}> | the bottom bar driven by ticked rows |
| JavaScript | Range.getBoundingClientRect() | where the selected words are, to place the bubble |
| ARIA | role="toolbar" + aria-pressed | the bubble and its pressed Bold button |
| React Spectrum | <ActionBar selectedItemCount={2} onClearSelection={…}> | count, actions and a clear button |
| Carbon | <TableBatchActions> | swaps in for the table's toolbar row at the top |
See also
From the maker of this site48h Icons · Custom Apple app icons in 48 hours48hicons.com →