Design Pattern Library - Add popovers
Popovers are used to provide additional, useful, unique information about an element, including one or multiple actionable elements. They inform the user of additional information within the context of their original view, but without forcing the user to act upon it like a modal. Popovers are different from tooltips, which do not provide rich markup and actionable items.
Additionally, a popover can contain a header section for images or content that need a separation in order to be clear in its communication. In those cases, a border is placed between the two content sections and one of those sections has a different background color or is filled with an image.
By default, popovers are summoned upon on hover and on touch of an element on touch devices. Pop-overs fade away by clicking on a link inside, or on a delay of the cursor moving outside the pop-over or its trigger element's bounding box.
By default, pop-overs should be placed below the referring element. However, if there isn’t enough space in the viewport or it blocks related content, the popover should be moved to the side or above as needed. Pop-overs have a max-width of 280px, but can be less wide if it suits their content.
Dos and Dont's
(Use this table to add images and text describing what’s ok and not ok. This is being collected for design.gitlab)
|Does not obscure related information||Does obscure related information|
Tooltips are related to pop-overs
Links / references
Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.
- Ensure that you have broken things down into atoms, molecules, and organisms.
- Check that you have not created a duplicate of an existing pattern.
- Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups.
- Make sure that text is created using text styles. When applicable used shared styles for colors.
- QA check by another UX'r (create and reference a file in this issue which includes the changes as you would like to add them to the gitlab-elements file)