A popover displays rich content in a non-modal dialog to describe or add additional information when users hover over, focus on, or click an interactive element. User can interact with popover content, including selecting text or clicking links. Use sparingly.

Also known as:
TooltipData viz tooltipCoach mark

AnchorNeed to know

  • A popover contains rich content, such as headings, links, and data.
  • Unlike a tooltip, a user can interact with popover content.
  • Trigger popovers from Interactive elements (Buttons, Links, Icon buttons) or Non-interactive elements (Icons, Abbreviations, Truncated text)—be mindful of keyboard accessibility
  • Use sparingly.


UI Kit



  • Headings:
    • Heading
    • No heading

To keep in mind

Popovers display contextual information.


  • The anatomy of a popover is made up of a container, content and tip (i.e. arrow).
  • A popover is connected to a trigger element, such as a chart target area, button or icon, that shows the popover when the interactive trigger element is hovered, focused, or tapped. (More details below.)


  • Usually contain headings, but optional if it doesn’t feel useful.
  • Progressively disclose more information as a user needs it, such as more information about a specific data point in a chart.
  • Provide useful, additional information or clarification, possibly including “learn more” links.

Visual details

  • “Size”:
    • A "large" popover has a max width of 450px.
    • The height adjusts for the amount of text available unless the “single line” option is used.
  • “Single Line” (singleLine): An option exists for "single line with truncation" that will prevent text wrapping and truncate with an ellipsis.
  • Size and single line and independent options. Be mindful of user-generated content such as URLs appearing in popovers that could be over 1080px if we don’t use a max-width.
  • Text and tips within popovers can be left, centered and right aligned, as appropriate within its environmental context.
  • Use strong signifiers for trigger elements to ensure the popover is discoverable.
  • The proximity of popovers is always paired nearby the element with which they are associated.
  • Don’t crop popovers e.g. at the edge of viewports.


  • Needs to be discoverable:
    • E.g. something like an icon to tell you there’s a tooltip
    • E.g. show the first tooltip/popover immediately on page load so people know they’re there
    • Avoid triggering tooltips from text without indicators that the text has behaviour
  • Needs to not be noisy (e.g. we don’t litter UI with icons all the time)
  • Only trigger tooltips from:
    • Interactive elements:
      • Buttons
      • Links
      • Icon buttons
    • Non-interactive elements (be mindful of keyboard accessibility):
      • Icons
      • Abbreviations (e.g. dashed underlined text for HRIS that shows a tooltip that says Human Resource Information System)
      • Truncated text

Interaction details

  • A popover is non-modal meaning having a popover displayed does not take the user into a new “mode”, blocking the page behind. Instead, if the user clicks elsewhere on the page, the popover is not only immediately dismissed but any interactive content clicked is immediately triggered. In contrast, clicking outside a modal would dismiss the overlay and not trigger any content underneath.
    • If clicking out of the popover will dismiss the popover, then consider adding a visible overlay behind the popover like a dark gray transparent overlay
  • If a popover is triggered by click,~~ it should auto-dismiss after a period of time or~~ be persistent with the option to dismiss.
  • If a popover is triggered on hover, it must also be triggered on touch (including on large touch devices) and may need additional design considerations to give strong affordances or signifiers that it’s interactive and can be triggered.

Animation details

A popover lifts up from the trigger point, by “slide fading” towards the top of the screen away from the trigger point. Related: Popover arrows always point down and “slide fade” upwards unless they're at a viewport edge, then the popover should move in the opposite (and most logical) direction.


  • Use sparingly. If you’re building something that requires a lot of popovers, work on clarifying the design and the language in the experience.
  • Only show 1 popover at a time.


  • A user might interact with a Popover, requiring focus, and it might contain rich content such as a link, so we need to move focus to the Popover when it’s triggered and support keyboard navigation to dismiss a dismissible Popover, allowing people using screen readers to fully perceive and operate the Popover content.
  • In contrast, Tooltips contain limited content so we can use an ‘announcer’ to announce tooltip content to people using screen readers e.g. using an ARIA live region.

Mood icons with popovers

  • Make sure the mood of the icon matches mood of the popover (e.g. information icon would use informative popover, the warning icon would use the cautionary popover)
  • When to use it:
    • When you have a list of items that the user needs to review, and each item may have a state. For example, a summary page of survey launch or the summary page of a performance evaluation cycle.
    • On the summary page of a survey launch, participants need to be selected before launching, so if the user hasn't selected any participants, we might show an error icon with a negative popover to alert them because they cannot proceed without adding participants.
    • Use this over an inline notification when there are multiple warnings on the page. We don't want to clutter the page and we don't want people to get banner blindness if there are several of these on the page.
  • When to use each mood:
    • Use a information icon with a informative popover to guide people towards value
    • Use a success icon with a positive popover when something good happens & when you want to celebrate success
    • Use a warning icon with a cautionary popover when alerting the user that there might be something wrong, but it's not preventing them from completing an action
    • Use a error icon with a negative popover when alerting the user a show-stopping problem
  • You need to be able to tab to this. See the icon page for more details.

When to use and when not to use

When to use
  • Use when the popover content would be too much information to include inline or create too much clutter. For example, show popovers for specific data points a user might be interested in a data visualization.
  • Use when the context of the rest of the page is important to keep visible.
When not to use
  • When there’s only non-interactive text, use a tooltip instead.
  • Avoid using popovers for forms or image content. Consider using a modal instead.
  • Avoid using popovers with low clickability signifiers on touch devices, including large touch devices. For an example of an alternative, see our mobile experience for trend chart visualization.
    • hover events don't work on mobile and tablet
    • focus events don't work because chart elements are typically SVG elements; they're not focusable
    • It’s possible to hook into click events, but scrolling is generally a more natural interaction for mobile and tablet; a chart element is not usually perceived as a clickable element
  • Avoid using popovers when people don’t need to see the rest of the screen. Consider using a modal instead.

External links