reflex/docs/library/overlay/popover.md

---

components:

- rx.radix.popover.root
- rx.radix.popover.content
- rx.radix.popover.trigger
- rx.radix.popover.close

only_low_level:

- True

PopoverRoot: |

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
)

PopoverContent: |

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},
    )
)