Refine By

Popover

  • Contents:

Popovers are activated when a user clicks on a trigger. They display actionable content in a confined space, layered on top of all other content. It supports longer content format and might include multiple links, buttons, or a form.

  • Popovers are similar to Tooltip, which should be used to show only quick bites of information.
  • Sometimes it is referred to as a Flyout

Guidelines

  • Popovers can include both title and body copy.
  • They support longer content and form elements.
  • Typically longer than a tooltip.
  • Popovers should be activated during keyboard focus and by clicking. This supports touch devices, and it allows users to move their mouse away from the target and still be able to read it.
  • Users can dismiss popovers by clicking the initial trigger a second time and tabbing.

Display differences between responsive web and mobile apps:

  • Popover displays as full screen modal when in tablet and mobile web view.
  • For iOS and Android, Popover is a System component so it should follow the system guidelines.
On mobile web, Popover displays as full screen modal.

Popover is a system component in the apps.

Accessibility

  • ¬†Ensure that users can understand what information will be expanded by using clear, concise text descriptions.
  • Ensure that all interactions can be triggered by users who are navigating with a keyboard.
  • Ensure that sufficient color contrast is used and that a focus state is provided so that the user knows which element they are on.
  • Provide helper content to screen reader users using ARIA so that a user knows whether or not an element is expanded.
  • Ensure that programmatic focus moves to the newly expanded content.
Read More

Considerations

  • Ensure that, when an “onhover” action is triggered, “onfocus” will also trigger the action.
  • Keep in mind that in responsive environments, users with or without disabilities who zoom in to 200% will trigger the mobile view. If tooltip information is provided to desktop users, it will be necessary to make it available to all users – regardless of which type of device they are using.
  • In addition to being able to open a tooltip from the keyboard, it is necessary to ensure that the tooltip can be closed from the keyboard – typically by using the esc key.
  • Testing should be done to ensure that:
    • The element with a tooltip can receive focus.
    • The tooltip can be expanded and closed from only a keyboard.
    • Information included in a tooltip is device-independent.
    • Screen readers announce the tooltip when it is expanded, and do not announce the information when it is not open.

 

ARIA Roles, States, and Properties

Related Elements

Related Components

Version History

Date/Time of ChangeWho Made the ChangeChange Details