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.

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 triggers

rx.popover.close

Wraps the control that will close the popover.

Props

No component specific props

Event Triggers

See the full list of default event triggers

Learn

Components

Recipes

API Reference

Popover

Basic Example

Examples in Context

Popover with dynamic title

Events when the Popover opens or closes

Number of times popover opened or closed: 0

Popover open: false

API Reference

rx.popover.root

Event Triggers

rx.popover.content

Event Triggers

rx.popover.trigger

Props

Event Triggers

rx.popover.close

Props

Event Triggers