Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Getting Started

Tutorial

Hosting

Reflex Deploy

Self Hosting

Library

Overlay

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

API Reference

PopoverRoot

Floating element for displaying rich content, triggered by a button.

Prop	Type	Default Value	Values
`open`	bool
`modal`	bool

Event Triggers

Trigger	Description
`on_open_change`	Fired when the open state changes.

PopoverContent

Contains content to be rendered in the open popover.

Prop	Type	Default Value	Values
`size`	Union[Literal, Breakpoints]
`side`	Literal
`side_offset`	int
`align`	Literal
`align_offset`	int
`avoid_collisions`	bool

Event Triggers

Trigger	Description
`on_open_auto_focus`	Fired when the dialog is opened.
`on_close_auto_focus`	Fired when the dialog is closed.
`on_escape_key_down`	Fired when the escape key is pressed.
`on_pointer_down_outside`	Fired when the pointer is down outside the dialog.
`on_focus_outside`	Fired when focus moves outside the dialog.
`on_interact_outside`	Fired when the pointer interacts outside the dialog.