Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

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(),
    ),
)

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

PropTypeDescriptionValues
arrow_paddingint

The padding required to prevent the arrow from reaching the very edge of the popper.

arrow_shadow_colorstr

The box-shadow of the popover arrow

arrow_sizeint

The size of the popover arrow

auto_focusbool

If true, focus will be transferred to the first interactive element when the popover opens

boundarystr

The boundary area for the popper. Used within the preventOverflow modifier

close_on_blurbool

If true, the popover will close when you blur out it by clicking outside or tabbing out

close_on_escbool

If true, the popover will close when you hit the Esc key

default_is_openbool

If true, the popover will be initially opened.

directionLiteral

Theme direction ltr or rtl. Popper's placement will be set accordingly

flipbool

If true, the popper will change its placement and flip when it's about to overflow its boundary area.

gutterint

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_lazybool

Performance 🚀: If true, the PopoverContent rendering will be deferred until the popover is open.

lazy_behaviorstr

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_openbool

If true, the popover will be opened in controlled mode.

match_widthbool

If true, the popper will match the width of the reference at all times. It's useful for autocomplete, date-picker and select patterns.

placementstr

The placement of the popover. It's used internally by Popper.js.

prevent_overflowbool

If true, will prevent the popper from being cut off and ensure it's visible within the boundary area.

return_focus_on_closebool

If true, focus will be returned to the element that triggers the popover when it closes

strategyLiteral

The CSS positioning strategy to use. ("fixed" | "absolute")

triggerLiteral

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

TriggerDescription
on_close

The on_close event handler is called when the user closes a form. For example, it is called when the user clicks on a close button.

on_open

The on_open event handler is called when the user opens a form. For example, it is called when the user clicks on a open button.

Used to wrap the reference (or trigger) element.

Props

No component specific props

Event Triggers

No component specific event triggers

The popover itself.

Props

No component specific props

Event Triggers

No component specific event triggers

The header of the popover.

Props

No component specific props

Event Triggers

No component specific event triggers

The body of the popover.

Props

No component specific props

Event Triggers

No component specific event triggers

Display a popover footer.

Props

No component specific props

Event Triggers

No component specific event triggers

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

Props

No component specific props

Event Triggers

No component specific event triggers

Used to wrap the position-reference element.

Props

No component specific props

Event Triggers

No component specific event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting