Popover

A flexible component that displays contextual information or interactive content triggered by a button. The content will be positioned relative to the trigger.

Uncontrolled mode for easy implementation

Focus is fully managed and customizable

Supports modal and non-modal modes

Architecture

so-popover
Slot: trigger You must place an so-button here.
so-button
Slot: content
so-popover-content
Slot: default
so-popover-close
Slot: default

Reference

  • Popover

    The root container that manages the state and behavior of the popover system. Coordinates the interaction between trigger and content.

    • Attributes

      • default-open
        boolean
        /
        default: false

        The initial open state of the popover when rendered. Use when you do not need to control its open state.

      • modal
        boolean
        /
        default: false

        When true, interaction with elements outside the popover will be disabled and only popover content will be visible to screen readers.

  • Content

    The container that holds the popover's content. Manages keyboard interactions, focus behavior, and positioning relative to the trigger element. Implements proper ARIA attributes for accessibility and handles collision detection with viewport boundaries.

    • Attributes

      • aria-label
        string
        /
        default: -

        Accessible label for the dropdown content when a visible label is not present.

      • aria-labelled-by
        string
        /
        default: -

        References the ID of the element that labels the menu content.

  • Close

    A wrapper for an so-button that handles popover closure. Automatically assigns appropriate ARIA roles to the button.

Keyboard

  • Space

    Toggles the popover open state.

  • Enter

    Toggles the popover open state.

  • Tab

    Moves focus to the next focusable element within the popover.

  • Shift+Tab

    Moves focus to the previous focusable element within the popover.

  • Escape

    Closes the popover and returns focus to the trigger element.

made for toddle