Popover

These popovers can appear with or without a heading. For accessibility reasons our popovers are designed to only be dismissed by re-selecting the element that triggered them, using the close button, or pressing the Escape key.

User experience

Popovers can retain helpful information to supplement a task or function. However, we don't recommend you hide critical information in popovers. Always surface important or critical information on the page or screen so it’s discoverable and not hidden behind an interaction.

The popovers purpose is to show only short snippets of un-styled text, they should not contain text styling, links or buttons. Their most common usage is for Help text.

Be wary of how popovers are used on mobile devices, or how they would work when users are using browser zoom or ZoomText to access your content. Popovers can obscure other content or functions, and be difficult to show reliably at smaller screen sizes. Alternatively, consider using a collapsible element or modal.

We recommend only using popovers when absolutely necessary, to consider the language you are using, and try to word things in such a way as to not require supplementary text.

Visual design

Popovers are designed to be small overlays of content housing secondary information. They are often used to elaborate on terms or provide additional information/explanation to labels etc. Given that most of our interfaces are content heavy popovers have been designed to clearly stand out above the underlying content as a result they are intentionally more pronounced than most UI elements in the GUI.

Dos and don’ts

• Do keep information simple and succinct.
• Avoid styling the content of a Popover
• Avoid using too much information inside the popover especially when designing responsive web apps.

Where is this available?