Intro

Gallery

Hosting

Components

New

Learn

Components

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	Description	Values
`open`	bool	The controlled open state of the popover.
`modal`	bool	The modality of the popover. When set to true, interaction with outside elements will be disabled and only popover content will be visible to screen readers.

Event Triggers

Trigger	Description
`on_open_change`	The on_open_change event handler is called when the open state of the component changes.

PopoverContent

Contains content to be rendered in the open popover.

Prop	Type	Description
`size`	Literal	Size of the button: "1" \| "2" \| "3" \| "4"
`side`	Literal	The preferred side of the anchor to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
`side_offset`	int	The distance in pixels from the anchor.
`align`	Literal	The preferred alignment against the anchor. May change when collisions occur.
`align_offset`	int	The vertical distance in pixels from the anchor.
`avoid_collisions`	bool	When true, overrides the side andalign preferences to prevent collisions with boundary edges.

Event Triggers

Trigger	Description
`on_open_auto_focus`	The on_open_auto_focus event handler is called when the component opens and the focus is returned to the first item.
`on_close_auto_focus`	The on_close_auto_focus event handler is called when focus moves to the trigger after closing. It can be prevented by calling event.preventDefault.
`on_escape_key_down`	The on_escape_key_down event handler is called when the escape key is down. It can be prevented by calling event.preventDefault.
`on_pointer_down_outside`	The on_pointer_down_outside event handler is called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.
`on_focus_outside`	The on_focus_outside event handler is called when the user focuses outside the component.
`on_interact_outside`	The on_interact_outside event handler is called when the user interacts outside the component.