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.
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.
To upgrade EsPopover to 3.1 and later, there are a few changes to make.
Previously, the triggering element had to be separate from EsPopover with an id that was passed into the target prop. Now, the triggering button will be generated by EsPopover, and all you need to do is pass in the contents (e.g. an info icon) into the trigger slot.
For accessibility reasons, the triggers prop is no longer available to specify whether the popover should appear on focus, hover, mouseover, etc. of the triggering element. It will now only appear on click/tap of the triggering button. If you need hover functionality, first consider whether it's really necessary (as hover has accessibility pitfalls). If it is necessary, the Tooltip component is available for hover needs.
There is no change for the popover contents; you can continue to pass that into the default slot of EsPopover.