reflex/docs/library/overlay/popover.md

components	only_low_level	PopoverRoot	PopoverContent
rx.radix.popover.root rx.radix.popover.content rx.radix.popover.trigger rx.radix.popover.close	True	lambda **props: rx.radix.themes.popover.root( rx.radix.themes.popover.trigger( rx.radix.themes.button("Popover"), ), rx.radix.themes.popover.content( rx.radix.themes.flex( rx.radix.themes.text("Simple Example"), rx.radix.themes.popover.close( rx.radix.themes.button("Close"), ), direction="column", spacing="3", ), ), **props )	lambda **props: rx.radix.themes.popover.root( rx.radix.themes.popover.trigger( rx.radix.themes.button("Popover"), ), rx.radix.themes.popover.content( rx.radix.themes.flex( rx.radix.themes.text("Simple Example"), rx.radix.themes.popover.close( rx.radix.themes.button("Close"), ), direction="column", spacing="3", ), **props ), )

import reflex as rx

Popover

A popover displays content, triggered by a button.

The popover.root contains all the parts of a popover.

The popover.trigger contains the button that toggles the popover.

The popover.content is the component that pops out when the popover is open.

The popover.close is the button that closes an open popover.

Basic Example

rx.popover.root(
    rx.popover.trigger(
        rx.button("Popover"),
    ),
    rx.popover.content(
        rx.flex(
            rx.text("Simple Example"),
            rx.popover.close(
                rx.button("Close"),
            ),
            direction="column",
            spacing="3",
        ),
    ),
)

Examples in Context

rx.popover.root(
    rx.popover.trigger(
        rx.button("Comment", variant="soft"),
    ),
    rx.popover.content(
        rx.flex(
            rx.avatar(
                "2",
                fallback="RX",
                radius="full"
            ),
            rx.box(
                rx.text_area(placeholder="Write a comment…", style={"height": 80}),
                rx.flex(
                    rx.checkbox("Send to group"),
                    rx.popover.close(
                        rx.button("Comment", size="1")
                    ),
                    spacing="3",
                    margin_top="12px",
                    justify="between",
                ),
                flex_grow="1",
            ),
            spacing="3"
        ),
        style={"width": 360},
    )
)

rx.popover.root(
    rx.popover.trigger(
        rx.button("Feedback", variant="classic"),
    ),
    rx.popover.content(
        rx.inset(
            side="top",
            background="url('https://source.unsplash.com/random/800x600') center/cover",
            height="100px",
        ),
        rx.box(
            rx.text_area(placeholder="Write a comment…", style={"height": 80}),
            rx.flex(
                rx.checkbox("Send to group"),
                rx.popover.close(
                    rx.button("Comment", size="1")
                ),
                spacing="3",
                margin_top="12px",
                justify="between",
            ),
            padding_top="12px",
        ),
        style={"width": 360},
    )
)