COMPONENTS
Popover
Popover displays nonessential information in a temporary window. It can include rich content such as titles, long definitions, scrollbars, hyperlinks, and images.
- Container
- Header
- Body
- Tip
There are two types of popovers — standard and dismissible. Both types can either show or hide the tip point. Standard popovers can be dismissed by either moving the cursor or selecting anywhere outside of the popover. Dismissible popovers can only be closed by selecting the close icon.
Popovers can be placed to the top, right, left or bottom of their related content.
When used above a dark background a popover should use reverse coloring.
Note: Changeable surface color is not currently available in the UI Toolkit as a component. This guidance outlines the latest research and recommendations from the Goldman Sachs Design System. Future guidance may change to support new research, methods and/or code.
Popovers can be displayed in medium and small sizes.
- Do not use for short text, instead use Tooltip.
- Do not hide important or essential content inside of a popover.
Contents