Popup vs modal vs overlay

Overlay

Popovers, modals, and tooltips are all kinds of overlays since they are rendered on top of (or overlay) the main content.

Popup can also be used to describe any element that pops up on the screen but it does carry a negative conotation since the era of annoying popup ads.

Sometimes the term overlay is used to refer to the semi-transparent backdrop between a modal and the main content.

There are 2 main categories of overlays:

Modal overlays - block user interaction with the main content
Non-modal overlays - do not block interaction with the main content

Modal vs non-modal overlays

Any overlay can be a modal overlay as long as it prevents the user from interacting with the main content until the overlay is dismissed. In practice dialogs and alerts are almost always modal overlays while toasts and snackbars are mostly non-modal overlays.

Modal overlays are often called interruptive while non-modal overlays can be described as ambient, contextual, or informative.

Modal overlays can use a backdrop and a focus trap to prevent the user from interacting with the main content.

Confirm

Drawers & sheets

Drawers (side sheets) and bottom sheets are overlays that slide into the view from the edges of the screen.

Drawers are often used on bigger screens where there is plenty of horizontal space.
Bottom sheets are mostly used on mobile screens where they are easy to reach with your thumb.

Drawers and bottom sheets can either be modal or non-modal overlays depending on whether they block main content interaction or not.

In responsive design, non-modal drawers on desktop often collapse to modal bottom sheets on mobile.

Toasts & snackbars

Toasts and snackbars are brief, non-modal overlays used to provide feedback about an operation.

They are designed to be "fire-and-forget" and usually disappear automatically after a few seconds.

Tooltip

A tooltip is a small overlay that appears when the user hovers over an element and usually disappears when the cursor moves away.

Tooltips typically contain short unstyled text.

Popover

A popover is similar to a tooltip, but it is generally larger and can contain more complex content, such as images, buttons, or forms.

Popovers are often triggered by clicking an element and are dismissed by clicking or interacting outside of the popover.