01
Hover and contextual information · semantic pattern
Tooltip
A small, non-interactive text popup that supplements a control when it receives hover or keyboard focus.
Reference set · 20 entries
Web UI patterns with behavior you can verify.
Browse the same reviewed rules used by the diagnostic engine. Presentation forms and behavior variants are labeled rather than disguised as equal semantic components.
Start with a descriptionComparison cluster
Hover and contextual information
02
Hover and contextual information · semantic pattern
Popover
A non-modal contextual surface that can contain interactive content and stays associated with a trigger.
03
Hover and contextual information · presentation form
Hover Card
A richer preview of a referenced person, place, or object, revealed from its link or trigger on hover and focus.
Comparison cluster
Dialog and side surfaces
01
Dialog and side surfaces · semantic pattern
Dialog
A separate window layered over a page that contains a focused task or information and may be modal or non-modal.
02
Dialog and side surfaces · semantic pattern
Modal Dialog
A dialog that makes the rest of the page inert until the user completes or dismisses the dialog.
03
Dialog and side surfaces · presentation form
Drawer
A panel that enters from a screen edge, often with touch-friendly drag or snap behavior; modality must be specified separately.
04
Dialog and side surfaces · presentation form
Sheet
A panel presented over the page from a defined side, commonly composed with dialog behavior and explicit close controls.
Comparison cluster
Selection and suggestions
01
Selection and suggestions · semantic pattern
Select
A control for choosing one or more values from a predefined set without accepting arbitrary text input.
02
Selection and suggestions · semantic pattern
Combobox
An input or selection control with an associated popup that presents allowed or suggested values.
03
Selection and suggestions · behavior variant
Autocomplete
A suggestion behavior that filters or completes values as a user types, commonly implemented as an editable combobox.
Comparison cluster
Menus and navigation
01
Menus and navigation · composite pattern
Dropdown Menu
A button-triggered menu of commands or choices with managed keyboard navigation.
02
Menus and navigation · composite pattern
Context Menu
A command menu opened for a specific object or pointer location, commonly by right-click or long press.
03
Menus and navigation · composite pattern
Navigation Menu
A structured set of links that helps users move through the primary destinations of a site or application.
Comparison cluster
Feedback and notices
01
Feedback and notices · message channel
Toast
A brief, non-blocking message about a recent event that may disappear after users have enough time to perceive it.
02
Feedback and notices · semantic pattern
Alert
A brief, important dynamic message announced to users without moving keyboard focus or blocking their task.
03
Feedback and notices · message channel
Notification
A message about an event or state that may persist, include actions, and remain available beyond the immediate moment.
04
Feedback and notices · presentation form
Banner
A prominent page-level message region that persists while a condition, announcement, or required awareness remains relevant.
Comparison cluster
Progressive disclosure
01
Progressive disclosure · composite pattern
Accordion
A vertically stacked set of interactive headings that reveal or hide their associated content panels.
02
Progressive disclosure · semantic pattern
Disclosure
A button that controls whether one related region of content is visible or hidden.
03
Progressive disclosure · generic behavior
Collapsible
A generic behavior in which a region can collapse or expand; it does not by itself define the surrounding semantic structure.