︲

︲

Popover

Displays rich content in a portal, triggered by a button.

Installation

Copy the following code into your app directory.

uv

uv run buridan add component popover
from components.ui.popover import popover

Anatomy

Use the following composition to build a Popover component.

popover.root( popover.trigger(), popover.portal( popover.backdrop(), popover.positioner( popover.popup( popover.header( popover.title(), popover.description(), ), popover.close(), ), ), ), )

Example

A basic popover that appears when the user clicks the trigger button.

Basic

A simple popover with a header, title, and description.

from components.ui.button import button
from components.ui.popover import popover


def popover_basic():
    return popover.root(
        popover.trigger(render_=button("Open Popover", variant="outline")),
        popover.portal(
            popover.backdrop(),
            popover.positioner(
                popover.popup(
                    popover.header(
                        popover.title("Dimensions"),
                        popover.description("Set the dimensions for the layer."),
                    ),
                ),
            ),
        ),
    )

Aligns

Use the align prop to control the alignment.

import reflex as rx

from components.ui.button import button
from components.ui.popover import popover


def popover_aligns():
    sides = [
        "left",
        "top",
        "bottom",
        "right",
        "inline-start",
        "inline-end",
    ]

    return rx.el.div(
        *[
            popover.root(
                popover.trigger(
                    render_=button(
                        side.replace("-", " ").title(), variant="outline", size="sm"
                    )
                ),
                popover.portal(
                    popover.backdrop(),
                    popover.positioner(
                        popover.popup(
                            popover.header(
                                popover.title(f"Align: {side.capitalize()}"),
                                popover.description(
                                    "Set the dimensions for the layer."
                                ),
                            ),
                        ),
                        side=side,
                    ),
                ),
            )
            for side in sides
        ],
        class_name="w-full max-w-xs flex flex-row flex-wrap gap-2.5 items-center justify-center",
    )