In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

Popover

A popover is a content cell displayed on-click with actions related to the clicked component.

General guidelines

Very similar to the tooltip which is used with hover, the popover provides actions on click.

Best practices

  • If the actions are totally essential for the user’s choice, opt to show them directly in the interface.
  • In most cases, opt to show the popover below the target element.
  • Prefer the click than the hover interaction
  • Make a custom popover thanks to the UI kit items is sometimes the best option to have a custom solution
  • When needed, add a title on the popover
  • If there are a lot of items, add a scroll bar not to disturb the user’s attention, or a show more button
Popover01
Visual guidelines

Layout

The popover superimposes itself on the screen. In relation to the position of the element within the interface, it may open from the bottom, the top, the left or the right. 

The interactive items inside can be checkboxes, links, ghost buttons with or without icon, diverse list elements. Respect the 8px grid to place the elements: a 16px padding is recommended. 

A title can be added on top of the actions, text content as well, but make sure the user identifies clearly the interactive elements.

Popover02

Appearance

They are available in dark and light. 

It can be used on datatables elements, on header’s icons, to provide a guided tour, etc. 

If you only want to provide information, visit the tooltip component.

 

Popover03
Tutorial

#01
To create your own Popover, you can start by picking a Background.

Popover04

#02
Detach the symbol and drag and drop the best symbol according to your need into the popover folder, by exploring the symbol list.

Popover05

#03
Keep adding all the necessary components into the folder. You can resize the item symbol in height to fill the arrow. But keep a consistent padding of 8px around the popover.

Popover06
Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top