Skip to content
Patternfly Logo

Popover

A popover is in-app messaging that provides more information on specific product areas. Popovers display content in a new window that overlays the current page. Unlike modals, popovers don’t block the current page.

Popovers are triggered by a click and dismissed in one of the following ways:

  • The user clicks the exit icon.
  • The user clicks anywhere on the screen outside the popover.
  • The user clicks an action button inside the popover. (Note: This won't always close the popover; it depends on the action button.)
popover example with placeholder text for the title and informational text

For information on other forms of on-screen help, see Tooltip and Hint.

Usage

Popovers are commonly used on form field labels, page titles or headings, or table column headings. Use popovers to:

  • Anticipate and answer questions for the user.
  • Help explain unfamiliar terms.
  • Provide context around a task.
popover for an email address form field explaining what the email address is used for

When using a popover to define a term or explain a concept, use a gray question-circle icon. Upon hover or click, the icon turns black.

Popover icon colors depending on state

To provide more information to a user without an accompanying UI element, you can add a popover to a linked question.

popover for a linked question

Use link button styling for the linked question, and add a blue question-circle icon before it. Clicking the link text triggers a popover, which answers the linked question.

Tooltips versus popovers

Both tooltips and popovers provide more information in context for users. However, they’re different in a few ways:

  • Tooltips are used for identification purposes, while popovers are used for added description or information in context.
  • Tooltips contain short descriptions or labels, while popovers contain longer descriptions, formatted text, and optional images or links.
  • Tooltips appear on hover, while popovers appear on click.

Content

  • Popover copy is longer than tooltip copy, but it should still be concise. Aim for 1–3 sentences.
  • Write in full sentences with punctuation.
  • Include relevant links to documentation when necessary.
  • Use popovers for additional information. Don’t use popovers for information critical to a user completing a task, such as password character requirements.

View source on GitHub