Nielsen Design System

Popout

Last Updated on Dec 15, 2022

A popout displays brief, informational content in an overlay. They can contain limited interaction if needed.

Component Variants

In Progress

Popouts have the same functionality as tooltips, but differ because they can contain some interactivity.
If content is only text, use a tooltip. If the content is rich text or has light interaction, a popover is the right choice.
Popovers display supplementary content or actions, without obscuring the whole page. They are meant to be seen for brief amounts of time.
Popovers dismiss as soon as the user clicks away on anything not contained inside the popover. If you need persistence, use a modal.

Always position next to the interface element that triggers them.

Use for secondary or less important information and actions.

Contain content and simple actions that share a relationships to each other

Keep the content of the popover concise and focused. Avoid cramming too much information or options.

Don’t make the popover larger than 768px wide or tall. They should be small to medium sized containers.

Don’t require a user to complete a complex task. Use a modal or a separate page instead.

Table of Contents

Related Components