Popover
Style
A popover should include text and interactive elements like a close button and links.
Variants
Black and white are the two popover variants available for use depending on the content and color of the background.
Warning
A heading does not need to be included, but if links are not included either, use a Tooltip component instead.
Black
Use on light background.
White
Use on dark background.
With heading
Use for messages that require a heading.
Without heading
Use for messages that do not require a heading.
With drop shadow
A drop shadow gives a popover subtle elevation above light backgrounds.
Without drop shadow
A drop shadow cannot be seen on dark backgrounds, so it is not included.
Theme
For popovers and tooltips, the themes are inverted. For example, light theme popovers are *black and should be used on light backgrounds; dark theme popovers are white and should be used on dark backgrounds.
Black (light backgrounds)
White (dark backgrounds)
Responsive design
A popover has the same proportions and spacing on both large and small screens.
Large screens
Small screens
Spacing
Each popover orientation contains the same amount of spacing in between the component and icon.
| Example | Token | Description |
|---|---|---|
| 16 | --rh-space-lg | 16px spacer |
| 24 | --rh-space-xl | 24px spacer |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
