Chapter I

Components

Names for the objects sitting on top of, beside, or inside an interface. Start here when someone says “popup.”

01

Tooltip

A small contextual hint attached to a trigger. It explains or labels; it should not contain a workflow.

Use whenThe user needs lightweight clarification on hover, focus, or long press.
Confused withPopover, because both float near a trigger.

“Add a popup on hover.”
“Show a tooltip on hover/focus with a short label.”

02

Popover

A non-modal floating panel anchored to a trigger. It can hold actions, previews, or small forms.

Contextual hint
Anchored to the trigger.
Use whenThe user needs a small decision surface without leaving context.
Don’t use whenThe action must block the page. That is a modal.

“Make a small modal under the button.”
“Open an anchored popover with actions and dismiss on outside click.”

03

Modal

A blocking dialog over a scrim. It interrupts the current surface until dismissed or completed.

ModalFocused dialog over a scrim.
Use whenThe user must make a focused decision before continuing.
Confused withDrawer, because both can feel like overlays.

“Open a centered popup.”
“Open a modal dialog over a scrim; trap focus until closed.”

04

Drawer

A panel that slides from an edge, often preserving a sense of the underlying page.

Drawer
Use whenDetails or filters are secondary but need room.
Don’t use whenThe content is only a tiny hint. Use tooltip or popover.

“Show a side popup.”
“Open a right drawer with the page dimmed behind it.”