Status
PublishedElement can be used in production | |
PublishedElement can be used in production | |
Angular | In backlogElement is in backlog |
React | In backlogElement is in backlog |
Popover is a container that floats over page content after pressing a trigger element. It contains supplemental content related to its trigger, and can be customized to include text, images, and interactions.
PublishedElement can be used in production | |
PublishedElement can be used in production | |
Angular | In backlogElement is in backlog |
React | In backlogElement is in backlog |
Popover is similar to tooltip and drawer but are not used for the same purpose. Identifying the right use case will make the experience clear for all users, particularly for those with cognitive and learning disabilities, or those using screen readers.
Component | Use case |
---|---|
Popover | Popover is a container that displays supplemental information after pressing its trigger element. They can contain limited interactions with its content, but should not contain actions that are required for the experience. |
Tooltip | Tooltip is a container that temporarily displays a short, text-only definition and is activated when a user hovers or focuses on an icon or other trigger. Limit tooltip content to short descriptions written in sentence case. If content is a full sentence, use punctuation. |
Drawer | Drawer is a secondary content component that sits off-screen until triggered by the user. It can contain multiple interactive elements and extensive content. |
Popovers can contain up to four elements: