• Table of contents
• Knowledge base

The structure of the popover component

Popovers, also known as popups, pop-unders or dropdowns, belong to a class of UI elements that share three common attributes:

1. They always appear on top of other page content.
2. They are ephemeral. When the user “moves on” to another part of the page the popover disappears.
3. They are generally “one at a time” - opening one popover closes others.

There are two of them on the landing page, the “Privacy, simplified.” one and the “Social” popover.

Structure of the popovers

Enhancing the focus indicators

<aside> 💡 Focus indicators are addressed globally in 1.1 Focus indicators, what follows below are additions on top of those suggestions.

</aside>

Applying the simple focus indicator style to the popover triggers do work, but they look out of place compared to the menu trigger, where the outline follows the rounded shape.

Buttons

With a couple lines of CSS it is easy to get the same look for all elements, making indicators accessible & consistent.

Enhanced indicators on the popover triggers

Links

The same indicators work well for the links inside the popovers:

Enhanced indicators on links inside the popovers

Issues and suggestions