A bubble is a small temporary overlay that appears on click to show extra information, options, or actions without navigating away. Bubbles are card-like surfaces with a directional arrow anchored to the trigger.
Use a tooltip for read-only hints on hover. Use a bubble when the user needs to click controls inside the overlay. Use a dialog when the task blocks the rest of the app. See the full comparison on Tooltips & Popovers.
Bubbles provide contextual content anchored to a trigger element. They differ from tooltips in that users can interact with content inside (buttons, inputs, links). See Tooltips & Popovers for trigger behavior and dismissal rules.
| Part | Guidance |
|---|---|
| Surface | Elevation overlay background (--color-surface-3), 4px radius, overlay shadow |
| Border | 1px --color-border — matches arrow stroke |
| Arrow | 10×10px rotated square; same fill and border as the bubble body; points at the trigger |
| Content | Title, body, actions, or menu items — structured layout, sentence case |
Light and dark panels show the same three bubble types side by side. Each includes a trigger and visible arrow.
Light mode
Export completed for sample.tif. Review results or dismiss.
Dark mode
Export completed for sample.tif. Review results or dismiss.
The arrow rotates to point at the anchor on any side. Bubble surface and arrow share the same fill and border color.
Above trigger
Below trigger
Left of trigger
Right of trigger