COMPONENTS / MOLECULES / al-popover← ALL COMPONENTS

Popover

<al-popover><ALPopover> REACTbeta

A floating panel anchored to a trigger for contextual information or actions. Supply its content through the body, header and footer slots; use position to select its placement.

PLAYGROUND2 CONTROLS
PREVIEW / al-popover / SOUTHLEFT
Loading preview
Open Popover Popover content
FLAGS
CODE — HTML / REACT
Guidance
NOT YET AUTHORED · 20 COMPONENTS COVERED
NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.
FIGMA PARITYNOT TRACKED
NO DESIGN-SYSTEM PROJECT TRACKS THIS COMPONENT AGAINST A FIGMA FILE — IT IS EITHER OUTSIDE EVERY PROJECT’S DECLARED SCOPE, OR NOT YET SEEDED INTO ITS PROJECT’S PARITY MANIFEST.
ACCESSIBILITYAXE 4.12.1
CHECKEVIDENCEDETAILRESULT
Default stateAXEpopover--DefaultPASS
Advanced statesAXE13 further storiesPASS
Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED
Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED
MEASURED 2026-09-08 · 14 STORIES · AXE WCAG2A + WCAG2AA + WCAG21A + WCAG21AA + WCAG22AA
COLOR CONTRAST0 RULES FAILING
The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.
NO CONTRAST VIOLATIONS ACROSS THIS COMPONENT’S 14 STORIES.
INSTALL@southleft/al-web-components/components/popover
import '@southleft/al-web-components/components/popover';
import { ALPopover } from '@southleft/al-react';
API — 7 PROPS7 DOCUMENTED
PROPTYPEDEFAULT
variant'menu'Variants
- **default** Displays the popover panel with padding
- **menu** Displays the popover panel without padding—
headingstringHeading text that appears in the header region—
position| 'bottom-center'
    | 'bottom-right'
    | 'bottom-left'
    | 'top-center'
    | 'top-right'
    | 'top-left'
    | 'left'
    | 'left-top'
    | 'right'
    | 'right-top'Positions the dropdown popover absolutely to the trigger.
- **default** places the popover to the bottom left
- **bottom-center** places the popover to the bottom center
- **bottom-right** places the popover to the bottom right
- **bottom-left** places the popover to the bottom left
- **top-center** places the popover to the top center
- **top-right** places the popover to the top right
- **top-left** places the popover to the top left
- **left** places the popover to the left
- **left-top** places the popover to the left top
- **right** places the popover to the right
- **right-top** places the popover to the right top'bottom-left'
isActivebooleanIs active?
- **true** Shows the popover container
- **false** Hides the popover container—
isDismissiblebooleanIs dismissible?
- **true** Shows the popover close button
- **false** Hides the popover close button—
ariaLabelledBystringAria Labelled By attribute
- Dynamically set for A11y—
transitionDelaynumberNumber of ms of the dialog's open/close css transition delay
- Used to delay focus trap activation400
SLOTS4
SLOTDESCRIPTION
(default)The main body of the popover
headerThe header of the popover that appears above the main slot
footerThe footer of the popover that appears below the main slot
triggerThe trigger that opens/closes the popover
EVENTS3
EVENTDESCRIPTIONTYPE
onPopoverOpenFired when the popover opens. Detail: `{ active }` — the new open state.CustomEvent
onPopoverCloseFired when the popover closes by any means. Detail: `{ active }`.CustomEvent
onPopoverCloseButtonFired only when the popover's close button is activated. Detail: `{ active }`. Use `onPopoverClose` to catch every close path.CustomEvent
PUBLIC METHODS4
METHODDESCRIPTION
setAria()Set aria-expanded to the trigger button 1. Dynamically sets the aria-labelledby for A11y 2. Set isExpanded to this.isActive if it's truthy, otherwise, set it to false
handleOnClickOutside()Handles the click event outside the component: 1. Check if the popover is active 2. Determine if the click occurred inside the active popover 3. Check if the click occurred outside the active popover 4. Close the popover if the click occurred outside it
handleOnKeydown()Handle on keydown events 1. When the Enter key is pressed on the trigger, open the popover and prevent default button click 2. If the popover is open and escape is keyed, close the popover and return focus to the trigger button
handleOnCloseButton()Handle on click of close button 1. Toggle the active state between true and false 2. Dispatch a custom event on click of close button
SOURCE — components/popover/popover.ts · Molecules/Popover