Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographyInteractionsSpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardTabsFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTileVideo thumbnail
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Popover Planned

OverviewStyleGuidelines
StyleColor schemeResponsive designSpacingStyleColor schemeResponsive designSpacing

Style

A popover should include text and interactive elements like a close button and links.

Popover component blueprint

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.

Popover component, black variant

White

Use on dark background.

Popover component, white variant

With heading

Use for messages that require a heading.

Popover component, with heading variant

Without heading

Use for messages that do not require a heading.

Popover component, without heading variant

With drop shadow

A drop shadow gives a popover subtle elevation above light backgrounds.

Popover component, with drop shadow variant

Without drop shadow

A drop shadow cannot be seen on dark backgrounds, so it is not included.

Popover component, without drop shadow variant

Color scheme

For popovers and tooltips, the themes are inverted. For example, light scheme popovers are *black and should be used on light backgrounds; dark scheme popovers are white and should be used on dark backgrounds.

Black (light backgrounds)

Popover component, light theme

White (dark backgrounds)

Popover component, dark theme

Responsive design

A popover has the same proportions and spacing on both large and small screens.

Large screens

Popover component responsive design, large screens

Small screens

Popover component responsive design, small screens

Spacing

Each popover orientation contains the same amount of spacing in between the component and icon.

Popover component spacing

© 2021-2025 Red Hat, Inc. Deploys by Netlify