Reflex | Popover

✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog ✨

Docs Blog Changelog

Search documentation...

Star

12k+

[ Learn ]

Getting Started

Tutorial

[ Concepts ]

[ Reference ]

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.popover(
    rx.popover_trigger(rx.button("Popover Example")),
    rx.popover_content(
        rx.popover_header("Confirm"),
        rx.popover_body("Do you want to confirm example?"),
        rx.popover_footer(rx.text("Footer text.")),
        rx.popover_close_button(),
    ),
)

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

Props

Prop	Type	Description
`arrow_padding`	int	The padding required to prevent the arrow from reaching the very edge of the popper.
`arrow_shadow_color`	str	The `box-shadow` of the popover arrow
`arrow_size`	int	The size of the popover arrow
`auto_focus`	bool	If true, focus will be transferred to the first interactive element when the popover opens
`boundary`	str	The boundary area for the popper. Used within the preventOverflow modifier
`close_on_blur`	bool	If true, the popover will close when you blur out it by clicking outside or tabbing out
`close_on_esc`	bool	If true, the popover will close when you hit the Esc key
`default_is_open`	bool	If true, the popover will be initially opened.
`direction`	str	Theme direction ltr or rtl. Popper's placement will be set accordingly
`flip`	bool	If true, the popper will change its placement and flip when it's about to overflow its boundary area.
`gutter`	int	The distance or margin between the reference and popper. It is used internally to create an offset modifier. NB: If you define offset prop, it'll override the gutter.
`id_`	str	The html id attribute of the popover. If not provided, we generate a unique id. This id is also used to auto-generate the `aria-labelledby` and `aria-describedby` attributes that points to the PopoverHeader and PopoverBody
`is_lazy`	bool	Performance 🚀: If true, the PopoverContent rendering will be deferred until the popover is open.
`lazy_behavior`	str	Performance 🚀: The lazy behavior of popover's content when not visible. Only works when `isLazy={true}` - "unmount": The popover's content is always unmounted when not open. - "keepMounted": The popover's content initially unmounted, but stays mounted when popover is open.
`is_open`	bool	If true, the popover will be opened in controlled mode.
`match_width`	bool	If true, the popper will match the width of the reference at all times. It's useful for autocomplete, `date-picker` and select patterns.
`placement`	str	The placement of the popover. It's used internally by Popper.js.
`prevent_overflow`	bool	If true, will prevent the popper from being cut off and ensure it's visible within the boundary area.
`return_focus_on_close`	bool	If true, focus will be returned to the element that triggers the popover when it closes
`strategy`	str	The CSS positioning strategy to use. ("fixed" \| "absolute")
`trigger`	str	The interaction that triggers the popover. hover - means the popover will open when you hover with mouse or focus with keyboard on the popover trigger click - means the popover will open on click or press Enter to Space on keyboard ("click" \| "hover")

Event Triggers

PopoverHeader

The header of the popover.

No props for PopoverHeader.

Base Event Triggers

PopoverBody

The body of the popover.

No props for PopoverBody.

Base Event Triggers

PopoverFooter

Display a popover footer.

No props for PopoverFooter.

Base Event Triggers

PopoverTrigger

Used to wrap the reference (or trigger) element.

No props for PopoverTrigger.

Base Event Triggers

PopoverAnchor

Used to wrap the position-reference element.

No props for PopoverAnchor.

Base Event Triggers

PopoverArrow

A visual arrow that points to the reference (or trigger).

No props for PopoverArrow.

Base Event Triggers

← Modal Tooltip →

.css-1ibpn7w{color:#DACEEE;}[ Learn ]

[ Concepts ]

[ Reference ]

Popover

Popover

Props

Event Triggers

Base Event Triggers

Component Specific Triggers

PopoverHeader

No props for PopoverHeader.

Base Event Triggers

PopoverBody

No props for PopoverBody.

Base Event Triggers

PopoverFooter

No props for PopoverFooter.

Base Event Triggers

PopoverTrigger

No props for PopoverTrigger.

Base Event Triggers

PopoverAnchor

No props for PopoverAnchor.

Base Event Triggers

PopoverArrow

No props for PopoverArrow.

Base Event Triggers

[ Learn ]