Popover

Keeps additional content easily accessible while not cluttering up the page.

Too much information at once overwhelms users, which is why Orbit is based around progressive disclosure. Popovers help by keeping small bits content off of the initial screen but still only a tap away.

Use them when you have only a few additional details, choices, or interactions that aren’t necessary to the main flow but still might interest users, such as adding and removing travelers. If you have larger content to convey, consider using a modal instead.

Component status

Figma

Released

Web (React)

Released

iOS (Swift)

n/a

Android (Kotlin)

n/a

Docs

Released

Component structure

Button: most common trigger to open popover, though other ways are possible; popover: wraps content and actions and can have a preferred position and alignment and/or overlap the button; content: wraps the main message or options; action area: optionally creates an area for actions associated with the whole popover, at least one of which should close the popover.

Guidelines

Keep it simple

Popovers present extra information or choices in a limited space. Don’t overwhelm your users with information.

Make trigger clear

Since popovers necessarily hide information from the initial screen, users need to know how they can get to that information.

A common way to do this is a button with a chevron down icon on the right. This makes it clear that more information can pop down below the button.

import Button from "@kiwicom/orbit-components/lib/Button";
import ChevronDown from "@kiwicom/orbit-components/lib/icons/ChevronDown";
import Popover from "@kiwicom/orbit-components/lib/Popover";

<Popover content="This is extra content">
  <Button
    iconRight={<ChevronDown />}
    type="secondary"
    preferredPosition="bottom"
  >
    Learn more
  </Button>
</Popover>

Minimize actions

Popovers have limited space outside the main flow. This means they’re best for resolving single issues, not many things at once.

# Focus actions

A popover with the ability to add adult and child passengers and a single primary action.

A popover with buttons to add passenger, add special meals, and add cabin bags.

Related components

Modal

Popovers are great for displaying small bits of information or individual choices. For anything that requires more information or structure, use a modal.

Dialog

Popovers can present their content without disrupting the main user flow. If the content is less related to the current screen or you don’t mind interrupting the flow to grab attention, consider a dialog.

Tooltip

Popovers can include small interactions or choices. If you have extra information that is only very short text, consider a tooltip.

Collapse

Popovers present information or choices outside the scope of the current screen. If you’d like to add the additional information to the screen itself, look into using a collapse.