Drawers, Modals, Popovers, and Primary detail

Author: Kevin Hatchoua | Last edit: March 21, 2023 | Design type: Details page | Product area: Hybrid Cloud Console
Tooltip vs Popover
Use when:
Showing a small amount of supplemental data in the context.
From Patternfly:
“Both tooltips and popovers allow users to get more information in context. However, they differ in two ways:
- Tooltips are used for identification purposes, while popovers are used for added descriptions or information in context.
- Tooltips appear on hover, while popovers appear on click
Use tooltips for:
- Short descriptions of an item or to identify an item, like an icon button
- Content that is no longer than 1 or 2 lines
Use popovers for:
- Longer descriptions
- Formatted text
- When you would like your in-context help to include pictures, actions, or links”
For more information, refer to the Patternfly guidance: Link
Modals
Use when:
A - The user needs to perform an action related to the current object (Actionable modal, with buttons) -- See the documentation about wizards, etc. for more information about actionable models.
B - Display supplemental information about the current object. If there is a lot of information to show, filtering, paging, expansions, etc may be used in the modal (Non-actionable, no buttons).
Avoid using a modal to display information related to the primary use case of a view. The information shown in a modal should not be “mission-critical” -- anything that is crucial should be shown as part of the main view.
Modals can contain other components, such as table features (filtering, paging), and other ways of showing more information (expansions, tooltips, and primary-detail patterns).
A modal should never be launched from another modal - use a different component in that case. A modal can launch out from a side panel/drawer when the action directly corresponds to the detail in the side panel.
Examples
In remediations, a modal is used to show a list of systems that are included in a specific action
The user clicks link to open modal
Modal shows the status of systems associated.
Primary-detail
Use when:
Showing more information about items in a list. Items should be arranged into a list/table and clicked on to show more information. A drawer-like element is used to show the additional data but it is not a “global” drawer, it is scoped to the list/table.
This component can be used inside of a modal.
“Use a [Primary] Detail pattern when viewing details from an item in a larger list/group of items on the same page. The [primary] detail view represents a one-to-many relationship with data, and is good for navigating back and forth through a list and making edits in the details of each list item, without losing context.”
For more information, refer to the Patternfly guidance: Link
Example screenshot:
Drawer
Use when:
Showing information about a specific object that is not the one in focus. (e.g. a related item, or documentation).
“If you would open it in a new tab, consider a drawer”
Drawers should not be used to show overflow data about the object in focus.
What does “object in focus” mean?
The “object in focus” is whatever the user is looking at. If they’re looking at the details of a specific system, that system is the “object in focus”. If they’re looking at a list of available patches for all their systems, the list is the “object in focus”.
Examples
A user is looking at a system comparison and wants to see more information about a specific system. This system is a separate object than “the comparison” so a drawer may be used. (Not developed)
Mockup of showing information about a system
In this example, the user is looking at some data about their operating systems. The user opens a drawer to show documentation and clarifying information about the data they are seeing.
This information would otherwise be shown in a documentation article.
Mockup of showing documentation that relates to the user’s objectives