desktop_windowsWeb
phone_iphoneMobile

COMPONENTS

Overview
Avatar
Badge
Breadcrumb
Buttons
Calendar
Cards
Checkbox
Chips
Combobox
Date pickers
Dividers
Dropdowns
Help text
Icon
Inline editable fields
Interactive Cards
Inputs
Link
Link button
Listbox
Menu
Messages
Meta list
Modals
Navigation - Horizontal
Navigation - Vertical
Page headers
Pagination
Pill
Popover
Progress indicators
Radio
Rich text editor
Select
Sidesheet
Sliders
Status hint
Stepper
Switch
Tables
Tabs
Time picker
Toast
Tooltip

Popover

Popover is used to display floating content in relation to a trigger, usually a button or link.

Usage
Code
Interactions

Appearance


Light

Dark

Structure



PropertyValue(s)
Corner radius4 px
Shadow30

Configurations

PropertyValue(s)Default value
Position
  • Top
  • Right
  • Bottom
  • Left
  • Top start
  • Top end
  • Bottom start
  • Bottom end
  • Right start
  • Right end
  • Left start
  • Left end
Bottom
Appearance
  • Light
  • Dark
Light

Usage


Positioning of Popover

Popovers appear either 8px above or 8px below their trigger.

The preferred and default side is the bottom. Popovers use smart positioning if there is not enough space in the designated direction.

Positioning of popover Positioning of popover

Padding inside popover

It is recommended to keep an overall padding of 16px inside the popover.

Padding inside popover Padding inside popover

Popover as tooltip


Popover as tooltip Popover as tooltip

Popover as a floating component


Popover as a floating component Popover as a floating component

Popover with actions

Popover with inputs

Popover as a dropdown


Popover as a dropdown Popover as a dropdown

Popover as a menu


Popover as a menu Popover as a menu

Popover vs Tooltip


Popover is an overlay container used to display links, interactive elements, avatars, text formatting (bullets etc), meta data in relation to a trigger whereas tooltip is used to display concise information.

Popover vs Tooltip Popover vs Tooltip

Was this page helpful?

CONTENTS