Version
has been released! Read the upgrade guide

Popover

The documentation on this page is considered legacy.

We will be updating this content to our new principle-based format in the near future.

Overview

A popover is a self-contained modal or dialogue that appears in context next to a trigger element. It contains more content than a tooltip, but is directly related to a trigger element in the same way as a tooltip.

1Anatomy

  1. Trigger. This element triggers the Popover container to appear. It also anchors the Popover, so it will display beside the trigger.

  2. Popover container. Much like the Card component, the Popover container accepts content and components. Its layout is dictated by the content it is displaying.

2Sizing and Spacing

Whilst the size of the popover should be dictated by its content, try to limit the overall size of the component. It should be there to provide additional context, not as a way to inline functionality that should either be a standalone page, or an actual modal/dialog.

3Hierarchy & Placement

Only one Popover can be active on a page at a time.

The MOD.UK Design System provides guidance and tools for building high–quality Services within the UK Ministry of Defence. This project is open source and its source code is available on GitHub.

All content is available under the Apache 2.0 licence, except where otherwise stated.

© Crown copyright