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
Examples in Context
ExpandCollapse
ExpandCollapse
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.
This code will work:
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.
Number of times popover opened or closed: 0
Popover open: false
ExpandCollapse
API Reference
rx.popover.root
Floating element for displaying rich content, triggered by a button.
Props
| Prop | Type | 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. |
rx.popover.content
Contains content to be rendered in the open popover.
sizealignProps
| Prop | Type | Description |
|---|---|---|
access_key | str | Provides a hint for generating a keyboard shortcut for the current element. |
auto_capitalize | "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 | "inherit""plaintext-only" | Indicates whether the element's content is editable. |
context_menu | str | Defines the ID of a <menu> 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 | "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 | "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 | "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 | "1""2""3""4" | Size of the button: "1" | "2" | "3" | "4". |
side | "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 | "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 | Union[float, int, dict] | 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 | "partial""always" | 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 | Whether to hide the content when the trigger becomes fully occluded. |
rx.popover.trigger
Wraps the control that will open the popover.
Props
No component specific props
Event Triggers
See the full list of default event triggersrx.popover.close
Wraps the control that will close the popover.
Props
No component specific props