> For AI agents: the complete documentation index is at [llms.txt](https://reflex.dev/docs/llms.txt). Markdown versions are available by appending `.md` or sending `Accept: text/markdown`. --- components: - rx.popover.root - rx.popover.content - rx.popover.trigger - rx.popover.close only_low_level: - True PopoverRoot: | lambda **props: 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", ), ), **props ) PopoverContent: | lambda **props: 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", ), **props ), ) --- ```python exec 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 ```python demo 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 ```python demo 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}, ), ) ``` ```python demo rx.popover.root( rx.popover.trigger( rx.button("Feedback", variant="classic"), ), rx.popover.content( rx.inset( side="top", background="url('https://images.unsplash.com/5/unsplash-kitsune-4.jpg') 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}, ), ) ``` ## Popover with dynamic title Code like below will not work as expected and it is necessary to place the dynamic title (`Index2State.language`) inside of an `rx.text` component. ```python class Index2State(rx.State): language: str = "EN" def index() -> rx.Component: return rx.popover.root( rx.popover.trigger( rx.button(Index2State.language), ), rx.popover.content(rx.text("Success")), ) ``` This code will work: ```python demo exec class Index2State(rx.State): language: str = "EN" def index() -> rx.Component: return rx.popover.root( rx.popover.trigger( rx.button(rx.text(Index2State.language)), ), rx.popover.content(rx.text("Success")), ) ``` ## Events when the Popover opens or closes The `on_open_change` event is called when the `open` state of the popover changes. It is used in conjunction with the `open` prop, which is passed to the event handler. ```python demo exec class PopoverState(rx.State): num_opens: int = 0 opened: bool = False @rx.event def count_opens(self, value: bool): self.opened = value self.num_opens += 1 def popover_example(): return rx.flex( rx.heading( f"Number of times popover opened or closed: {PopoverState.num_opens}" ), rx.heading(f"Popover open: {PopoverState.opened}"), 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", ), ), on_open_change=PopoverState.count_opens, ), direction="column", spacing="3", ) ``` ## API Reference ### rx.popover.root Floating element for displaying rich content, triggered by a button. #### Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `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. | | `default_open` | bool | - | The open state of the popover when it is initially rendered. Use when you do not need to control its open state. | #### Event Triggers Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/ Component-specific event triggers: | Event Trigger | Description | | --- | --- | | `on_open_change` | Fired when the open state changes. | ### rx.popover.content Contains content to be rendered in the open popover. #### Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `access_key` | str | - | Provides a hint for generating a keyboard shortcut for the current element. | | `auto_capitalize` | Literal["off", "none", "on", "sentences", "words", "characters"] | - | Controls whether and how text input is automatically capitalized as it is entered/edited by the user. | | `content_editable` | Literal["inherit", "plaintext-only"], bool | - | Indicates whether the element's content is editable. | | `context_menu` | str | - | Defines the ID of a element which will serve as the element's context menu. | | `dir` | str | - | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left). | | `draggable` | bool | - | Defines whether the element can be dragged. | | `enter_key_hint` | Literal["enter", "done", "go", "next", "previous", "search", "send"] | - | Hints what media types the media element is able to play. | | `hidden` | bool | - | Defines whether the element is hidden. | | `input_mode` | Literal["none", "text", "tel", "url", "email", "numeric", "decimal", "search"] | - | Defines the type of the element. | | `item_prop` | str | - | Defines the name of the element for metadata purposes. | | `lang` | str | - | Defines the language used in the element. | | `role` | Literal["alert", "alertdialog", "application", "article", "banner", "button", "cell", "checkbox", "columnheader", "combobox", "complementary", "contentinfo", "definition", "dialog", "directory", "document", "feed", "figure", "form", "grid", "gridcell", "group", "heading", "img", "link", "list", "listbox", "listitem", "log", "main", "marquee", "math", "menu", "menubar", "menuitem", "menuitemcheckbox", "menuitemradio", "navigation", "none", "note", "option", "presentation", "progressbar", "radio", "radiogroup", "region", "row", "rowgroup", "rowheader", "scrollbar", "search", "searchbox", "separator", "slider", "spinbutton", "status", "switch", "tab", "table", "tablist", "tabpanel", "term", "textbox", "timer", "toolbar", "tooltip", "tree", "treegrid", "treeitem"] | - | Defines the role of the element. | | `slot` | str | - | Assigns a slot in a shadow DOM shadow tree to an element. | | `spell_check` | bool | - | Defines whether the element may be checked for spelling errors. | | `tab_index` | int | - | Defines the position of the current element in the tabbing order. | | `title` | str | - | Defines a tooltip for the element. | | `size` | Literal["1", "2", "3", "4"], Breakpoints[str, Literal["1", "2", "3", "4"]] | - | Size of the button: "1", "2", "3", "4". | | `side` | Literal["top", "right", "bottom", "left"] | - | 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["start", "center", "end"] | - | 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. | | `collision_padding` | float, int, dict[str, float, int] | `0` | The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. | | `sticky` | Literal["partial", "always"] | `"partial"` | The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. | | `hide_when_detached` | bool | `False` | Whether to hide the content when the trigger becomes fully occluded. | #### Event Triggers Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/ Component-specific event triggers: | Event 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. | ### rx.popover.trigger Wraps the control that will open the popover. #### Event Triggers Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/ ### rx.popover.close Wraps the control that will close the popover. #### Event Triggers Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/