Disclosure Patterns

Not all information needs to be visible at once. Disclosure patterns let users access detail when they want it, without cluttering the interface for users who do not.

Accordions

An accordion collapses sections of content behind a clickable header. It is appropriate when users need only one or a few sections at a time, and showing all sections simultaneously would make the page unwieldy. FAQ pages, settings panels, and product specification lists are common use cases. When multiple sections can be open simultaneously, use independent toggles. When only one section should be open at a time, collapse the previous one when a new one opens — but communicate this behaviour through the UI so users are not surprised when content they opened disappears.

Tooltips

A tooltip reveals supplementary information on hover or focus — typically a short label or clarification for an icon or abbreviated label. Tooltips should contain reference information, not critical instructions. If the information in a tooltip is essential for a user to complete a task, it should not be hidden in a tooltip. Tooltips are unavailable on touch devices by default, so any information inside them must also be available through another means.

Modals

A modal focuses the user’s attention on a specific task or decision by overlaying the page and blocking access to everything behind it. Use modals for focused tasks that require completion before the user returns to the main flow — confirmations, short forms, critical alerts. Do not use a modal to display read-only content that has no action — a modal without a clear task is a disruption with no benefit. Always provide a clear way to dismiss: an explicit close button, an Escape key handler, and — for non-critical modals — a click-outside-to-close behaviour. Always return focus to the triggering element on close.

Popovers

The HTML Popover API provides a native floating element pattern for non-modal interactive content: dropdown menus, autocomplete lists, nested navigation, date pickers, contextual action panels. Unlike a modal, a popover does not block interaction with the rest of the page. Unlike a tooltip, it can contain interactive content — links, buttons, form fields.

<button popovertarget="user-menu">Account</button>
<ul id="user-menu" popover>
  <li><a href="/profile">Profile</a></li>
  <li><a href="/settings">Settings</a></li>
  <li><button>Sign out</button></li>
</ul>

The browser handles: toggling on trigger click, dismissing on Escape key, dismissing when another popover="auto" element opens (only one auto popover can be open simultaneously), and placing the popover in the top layer — above fixed-position elements and z-index stacking entirely. This eliminates the positioning, z-index management, and outside-click handling that custom dropdown implementations require.

Popovers are now supported in all major browsers. Use them for floating interactive content that should not block the page. Continue using modals for tasks that require completion before returning to the main flow — popovers do not trap focus and are appropriate for supplementary, dismissible content.

The overuse problem

Disclosure patterns are frequently overused as a way to manage information density without restructuring the information architecture. If a page requires multiple levels of accordions, nested modals, or stacked tooltips to contain all its content, the underlying information problem has not been solved — it has been hidden. Use disclosure patterns selectively, for information that is genuinely secondary to the user’s primary task.

The takeaway

Use disclosure to defer detail, not to avoid information architecture decisions. For each pattern: define the trigger, what is revealed, how it is dismissed, and where focus should be after interaction. Ensure no critical information is accessible only through a disclosure pattern that may be unavailable in some contexts.