Learn

Components

Recipes

API Reference

Onboarding

Getting Started

Tutorial

Hosting

Reflex Deploy

Self Hosting

Library

/

Chakra

/

Overlay

/

Popover

Popover is a non-modal dialog that floats around a trigger. It is used to display contextual information to the user, and should be paired with a clickable trigger element.

rx.chakra.popover(
    rx.chakra.popover_trigger(
        rx.chakra.button("Popover Example")
    ),
    rx.chakra.popover_content(
        rx.chakra.popover_header("Confirm"),
        rx.chakra.popover_body(
            "Do you want to confirm example?"
        ),
        rx.chakra.popover_footer(
            rx.chakra.text("Footer text.")
        ),
        rx.chakra.popover_close_button(),
    ),
)

API Reference

The wrapper that provides props, state, and context to its children.

Prop	Type	Default Value	Values
`arrow_padding`	int
`arrow_shadow_color`	str
`arrow_size`	int
`auto_focus`	bool
`boundary`	str
`close_on_blur`	bool
`close_on_esc`	bool
`default_is_open`	bool
`direction`	Literal
`flip`	bool
`gutter`	int
`id_`	str
`is_lazy`	bool
`lazy_behavior`	str
`is_open`	bool
`match_width`	bool
`placement`	str
`prevent_overflow`	bool
`return_focus_on_close`	bool
`strategy`	Literal
`trigger`	Literal