desktop_windows_roundWeb
phone_iphone_roundMobile

COMPONENTS

Overview
Avatar
Badge
Breadcrumb
Buttons
Calendar
Cards
Checkbox
Chips
Date pickers
Dividers
Dropdowns
Help text
Icon
Inline editable fields
Inputs
Link
Link button
Messages
Meta list
Modals
Navigation - Horizontal
Navigation - Vertical
Page headers
Pagination
Pill
Popover
Progress indicators
Radio
Rich text editor
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
ShadowShadow 30

Configurations

PropertyValue(s)Default value
Position
  • Top
  • Right
  • Bottom
  • Left
  • Top start
  • Top end
  • Bottom start
  • Bottom 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

    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