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

Examples in Context

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:

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

API Reference

rx.popover.root

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

Prop	Type \| Values	Interactive
`open`	`bool`
`modal`	`bool`	false
`default_open`	`bool`

Event Triggers

See the full list of default event triggers

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

rx.popover.content

Contains content to be rendered in the open popover.

Prop	Type \| Values	Interactive
`size`	`"1" \| "2" \| ...`
`side`	`"top" \| "right" \| ...`
`side_offset`	`int`
`align`	`"start" \| "center" \| ...`
`align_offset`	`int`
`avoid_collisions`	`bool`	false
`collision_padding`	`Union[float, int, dict]`
`sticky`	`"partial" \| "always"`
`hide_when_detached`	`bool`	false

Event Triggers

See the full list of default 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.