Also known as:
TooltipData viz tooltipCoach mark

Popover

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.

Need 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.

Options

  • Headings:
    • Heading
    • No heading

To keep in mind

Popovers display contextual information.

  • Anatomy:
    • 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.)
  • Content:
    • 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.
  • Trigger:
    • 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.
  • Amount:
    • 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.
  • Accessibility:
    • 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.

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