Popover

Extended from Reka UI Popover

A popover is opened on tap or click and displays a speech-bubble-like popup with some additional information. For keyboard users and screen readers, it acts like a modal dialog in that it traps focus until you close it. This is ideal for accessibility — especially when the popover contains interactive elements like a link or button — so that users can browse the full contents of the popover before continuing down the page.

Direction

Using the side prop allows you to control on which side of the triggering element the popover will attempt to appear. If there is not enough room on that side, the popover will switch to the opposite side.

Positioned on top (default)

Positioned on right

Positioned on bottom

Positioned on left

Headings and CTAs

These examples show the recommended styling for headings and how a link or button should appear at the bottom of the popover.

This popover contains a heading and a link

This popover contains a heading and a button

Collision padding

This example shows how to tell the popover that there is a sticky element it should treat as the edge of visibility and flip the popover to the opposite side when reached. This is useful when there is a sticky navbar or CTA banner on the page and you want to ensure the popover remains visible and doesn't appear partially hidden underneath it.

This popover will flip when it gets 100px away from the top of the viewport

External control

This example shows how to control the visibility of the popover from an external source. It can still be opened and closed via the trigger button and via click/tap outside, but the buttons also have the ability to show and hide the popover.

This popover is controlled by the show/hide buttons

Light variant

Use the light variant if the popover will appear against a dark background.

This popover only contains text

This popover contains a heading and a link

This popover contains a heading and a button

EsPopover props

Name
collisionPadding
Type
number or object
Default
0
Description
The distance in pixels from the viewport edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.
Name
show
Type
boolean or undefined
Default
undefined
Description
The controlled open state of the popover.
Name
side
Type
String
Default
'top'
Description
Specifies on which side of the trigger button the popover should attempt to appear. Can be 'top', 'right', 'bottom', or 'left'.
Name
triggerClass
Type
String
Default
''
Description
Classes, if any, that should be applied to the trigger button.
Name
triggerDescription
Type
String
Default
'More information'
Description
A description of the trigger button that will be read out to screen readers upon reaching the button.
Name
variant
Type
String
Default
'dark'
Description
Determines whether the popover appears with a darker or lighter background. Can be 'dark' or 'light'.

EsPopover slots

Name
trigger
Default
n/a
Description
Required. The icon and/or content to put inside the trigger button.

EsPopover events

Name
update:show
Type
boolean
Description
Event handler called when the open state of the popover changes.

Migration from 3.0 and earlier