Overlay Taxonomy

This is a defined taxonomy for overlay things on the web. A taxonomy is a way of organizing things into groups and subgroups based on shared characteristics. These definitions intend to reflect concepts already defined in or strongly inferred from existing W3C specifications and proposals. They do not necessarily reflect what exactly an element, attribute, property, or method of the same name does on the web.

Term	Description
overlay	Content that is displayed in a distinct layer over other content.
modal	An overlay that is blocking, interrupting the user flow and preventing access to other content.
non-modal	An overlay that is non-blocking, allowing access to other content.
dialog	A modal overlay, usually containing an action or task to perform.
popover	A non-modal overlay, usually containing ephemeral information.

overlay
├── dialog (modal)
│   ├── alert
│   └── select
└── popover (non-modal)
    ├── combobox
    ├── hovercard
    ├── navigation popup
    ├── toast
    └── tooltip

Term	Description
alert	A dialog used to provide important, and usually time-sensitive, information. It demands user attention and typically requires some form of acknowledgment.
select	A dialog used to provide a choice of one or more items from a list of options. It usually includes a discloser button and a dropdown for selection.
combobox	A dialog used to provide a list of selectable options to a text control. It usually allows users to either type their input or select from a list.
hover card / navigation popup	A popover used to provide additional information to a link or action. It is usually shown while the link or action is interactive.
toast	A popover used to provide a brief notification or brief feedback. It usually appears temporarily and does not require user interaction to disappear.
tooltip	A popover used to provide a short-lengthed and non-essential label or description. It typically appears on hover or focus to give more context about an element.

Term	Description
user dismissal	A behavior where an overlay remains open until dismissed by specific user input.
timed dismissal	A behavior where an overlay remains open until dismissed by an expiring timer.
light dismissal	A behavior where an overlay remains open until dismissed by losing focus, or by the user pressing an Escape key or clicking outside the element.

dismissal
├── user
│   ├── alert
│   ├── post
│   └── toast
├── timed
│   └── toast
└── light
    ├── combobox
    ├── hover card
    ├── navigation popup
    └── tooltip

Term	Description
force closure	A behavior where showing an overlay hides all other, non-ancestral dialogs.
focus trap	A behavior where a container prevents keyboard interaction from leaving itself.
top layer	A visual layer displayed over all other content. Popovers and modals are displayed from the top layer.
backdrop	A visual layer obscuring content behind it, usually conveying the obscured content as unavailable for interaction.
blocking	A characteristic where content is exclusively interactive, and other content is implicitly inert.
inert	A characteristic where content cannot be interacted with.
tooltip label	A tooltip used to provide a text label for a control without a visible label.
tooltip description	A tooltip used to provide supplementary text for a control without a visible description.

Acknowledgements

This list was originally created from the HTML specification for <dialog> and the proposal for the popover attribute. It was greatly revised and initiall shared following some expertise of Hidde de Vries, who then generously offered further input used in additional edits.

Note: Everyone is absolutely entitled to their own terminology, of course, so the goal of this document is only to unify some of the ‘baked-in’ concepts we get for free.

jonathantneal/README.md

Overlay Taxonomy

Acknowledgements