Back to components

Popover

Popovers provide additional information upon interaction.

Vilket år blev du ägare?Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar, byggnaderna och tomten. Försäkringen är en trygghet för dig som äger hus.

This is the general documentation for the popover, and all of it's shapes and sizes. For specific documentation regarding components using the popover, please see the relevant section:

Table of Contents

Edit this section, Opens in new window

Overview

Popovers provide either related additional content on interaction.

Edit this section, Opens in new window

Usage

Principles

  • The arrow on the popover should always point to the element triggering the popover
  • The arrow could be placed off center horizontally/vertically to match the initiating element and screen sizes
  • The popover should always have a close button, but that can be omitted if the use case is good enough
  • The popover is always closed if the user clicks the initiating element again or by pressing Close
  • The popover is not a tooltip, if you want a tooltip, see the Tooltip component
  • Clicking outside of the popover should close the popover
  • Pressing Escape should close the popover
  • A popover can be initialized on hover, focus or on click. Help - and Info Tooltips always open on click/touch

Positioning

The Popover component should preferably be positioned on top of the initiator, but there are some use cases where this is not applicable:

  • A popover on hover for help and guidance in left aligned (aligned to the viewport) items or top aligned items
  • When the initiator is above a certain threshold and instead of forcing the user to scroll to see the popover, the popover should be positioned under the initiator
  • If there's not enough room for a popover to the left, align it to bottom
  • If there's not enough room for a popover on the right, align to top
  • On mobile, the popover, regardless of usage and form, should be aligned to the top. If there is no room for it (scroll), align it to the bottom
  • And when used as a red validation feedback popover, it should always be aligned to the bottom. If there is no room for it (scroll), align it to top
Edit this section, Opens in new window

Behaviours

Interaction

While it is not desired to have interaction elements in popovers, it is possible for very narrow use cases, like in a walktrough/guide setup with popovers.

A close button should always be present if the popover is initiated on click, and close the popover on click.

Interactive elements can NOT be used in the Info Tooltip component or the Help Tooltip component. These components are specialized for displaying more information for certain cases.

The use case for interactive elements should be limited to for example in a series of popovers like in a guide.

Modifiers

Position

The popover can be placed where it best fit based on viewport position. If the popover can't be placed centered too the initiator, the popover arrow can be realigned.

Vilket år blev du ägare?Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar, byggnaderna och tomten. Försäkringen är en trygghet för dig som äger hus.
Right position

The popover is positioned to the right

Vilket år blev du ägare?Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar, byggnaderna och tomten. Försäkringen är en trygghet för dig som äger hus.
Top position

The popover is positioned to the top

Vilket år blev du ägare?Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar, byggnaderna och tomten. Försäkringen är en trygghet för dig som äger hus.
Left position

The popover is positioned to the left

Vilket år blev du ägare?Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar, byggnaderna och tomten. Försäkringen är en trygghet för dig som äger hus.
Bottom position

The popover is positioned to the bottom

As validation message

Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar, byggnaderna och tomten. Försäkringen är en trygghet för dig som äger hus.

Small

Vilket år blev du ägare?
Right position

The popover is positioned to the right

Vilket år blev du ägare?
Top position

The popover is positioned to the top

Vilket år blev du ägare?
Left position

The popover is positioned to the left

Vilket år blev du ägare?
Bottom position

The popover is positioned to the bottom

Edit this section, Opens in new window

Anatomy

Vilket år blev du ägare?Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar, byggnaderna och tomten. Försäkringen är en trygghet för dig som äger hus.
Popover
  1. Popover
  2. Close (optional)
  3. Title (optional)
  4. Text
Style
  1. The fill color is BR 1, BROWN
  2. The stroke color is BE 5, LIGHTEST BEIGE
  3. The text color is BE 5, LIGHTEST BEIGE
  4. The text color is BE 5, LIGHTEST BEIGE
Edit this section, Opens in new window

Specs

Vilket år blev du ägare?Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar, byggnaderna och tomten. Försäkringen är en trygghet för dig som äger hus.
Vilket år blev du ägare?Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar, byggnaderna och tomten. Försäkringen är en trygghet för dig som äger hus.
Edit this section, Opens in new window

Accessibility

  • If you have space, don't use popovers. Just provide clear labels and sufficient body text.
  • If it's a tooltip you are looking to use, decide whether the tip's content should be provided as the label or description and choose ARIA properties accordingly.
  • Don't rely on title attributes. They are not keyboard accessible and are not supported in many screen reader setups.
  • Don't describe popovers with aria-describedby. It makes the subject button non-functional to screen reader users.

Length

Due to its disruptive nature, popover content should be kept to an absolute minimum. For larger sets of content or data, consider using a Passive Modal. The Modal will be triggered when the user clicks the information icon.

Interactive elements

The primary purpose of a popover is to provide additional help or context to an item. Therefore, they should contain read-only text. The use of interactive elements, such as Buttons or Links, is discouraged.

Edit this section, Opens in new window
Contact us, Opens in new window