Overview

Purpose

The Popover is a user-activated overlay to show contextual information. It is only used for supplementary content that isn’t essential to most users, yet relevant to the journey.

It should only be used where necessary because it’s more user-friendly to have content visible rather than hidden behind an interaction.

Anatomy

The Popover component can be broken down into the following elements -

1. Popover container
   Container in speech bubble shape to hold the Popover information.

2. Content area
   Text area for the Popover information.

Variants & States

Alignment: Left, Centre, Right