Skip to main content

​
Import

from reflex_ui import popover

​
Description

A popover component that displays floating content anchored to a trigger element. Supports advanced positioning with collision detection and can be opened on hover or click.

​
High-Level API

popover(
    trigger=button("Open Popover"),
    title="Popover Title",
    description="Description text",
    content="Popover content"
)

​
Props

​
trigger
Component | None
Component that triggers the popover
​
title
str | Component | None
Popover title text or component
​
description
str | Component | None
Description shown below the title
​
content
str | Component | None
Main popover content
​
default_open
bool
default:"False"
Initial open state when uncontrolled
​
open
Var[bool] | bool
Controlled open state
​
modal
bool | Literal['trap-focus']
Modal behavior:
  • True: Focus trapped, scroll locked, pointer interactions disabled
  • False: Full document interaction allowed
  • 'trap-focus': Focus trapped but scroll/pointer enabled

​
Trigger Props

​
open_on_hover
bool
default:"False"
Open popover on hover instead of click
​
delay
int
default:"300"
Delay in ms before opening on hover
​
close_delay
int
default:"0"
Delay in ms before closing when hover ends

​
Positioning Props

​
side
Literal['top', 'right', 'bottom', 'left', 'inline-start', 'inline-end']
default:"'bottom'"
Which side of the trigger to align against
​
align
Literal['start', 'center', 'end']
default:"'center'"
How to align the popup relative to the side
​
side_offset
int
default:"4"
Distance between trigger and popup in pixels
​
align_offset
int
default:"0"
Offset along the alignment axis in pixels
​
arrow_padding
int
default:"5"
Minimum distance between arrow and popup edges
​
anchor
str
Element selector to position against (defaults to trigger)
​
collision_boundary
str
default:"'clipping-ancestors'"
Boundary element for collision detection
​
collision_padding
int | list[int]
default:"5"
Padding from collision boundary edges
​
sticky
bool
default:"False"
Maintain popup position after anchor scrolls out of view
​
position_method
Literal['absolute', 'fixed']
default:"'absolute'"
CSS position property to use
​
disable_anchor_tracking
bool
default:"False"
Disable tracking anchor’s layout shifts

​
Portal Props

​
container
str
Parent element selector for portal
​
keep_mounted
bool
default:"False"
Keep portal mounted when hidden

​
Event Handlers

​
on_open_change
EventHandler[bool]
Called when popover opens or closes
​
on_open_change_complete
EventHandler[bool]
Called after animations complete

​
Compositional API

​
popover.root()

Root container for all popover parts.
​
default_open
bool
Initial open state
​
open
Var[bool] | bool
Controlled open state
​
modal
bool | Literal['trap-focus']
Modal state behavior

​
popover.trigger()

Button that opens the popover. Renders a <button> element.
​
native_button
bool
default:"True"
Render as native button element
​
open_on_hover
bool
Enable hover triggering
​
delay
int
Hover open delay (ms)
​
close_delay
int
Hover close delay (ms)
​
render_
Component
Custom trigger component

​
popover.backdrop()

Overlay beneath the popup. Renders a <div> element.
​
render_
Component
Custom backdrop component

​
popover.portal()

Portals popup to different DOM location.
​
container
str
Parent element selector
​
keep_mounted
bool
Keep mounted when hidden

​
popover.positioner()

Positions the popup against the trigger. Renders a <div> element.
​
align
Literal['start', 'center', 'end']
Alignment relative to side
​
align_offset
int
Alignment axis offset
​
side
Literal['top', 'right', 'bottom', 'left', 'inline-start', 'inline-end']
Which side to align to
​
side_offset
int
Distance from trigger
​
arrow_padding
int
Arrow edge padding
​
anchor
str
Position anchor element
​
collision_boundary
str
Collision boundary element
​
collision_padding
int | list[int]
Boundary padding
​
sticky
bool
Maintain position on scroll
​
position_method
Literal['absolute', 'fixed']
CSS position method
​
disable_anchor_tracking
bool
Disable anchor tracking
​
collision_avoidance
str
Collision handling strategy
​
render_
Component
Custom positioner component

​
popover.popup()

Container for popover content. Renders a <div> element.
​
initial_focus
str
Element selector to focus on open
​
final_focus
str
Element selector to focus on close
​
render_
Component
Custom popup component

​
popover.arrow()

Arrow pointing to the trigger. Renders a <div> element.
​
render_
Component
Custom arrow component

​
popover.title()

Heading that labels the popover. Renders an <h2> element.
​
render_
Component
Custom title component

​
popover.description()

Additional information paragraph. Renders a <p> element.
​
render_
Component
Custom description component

​
popover.close()

Button that closes the popover. Renders a <button> element.
​
render_
Component
Custom close button component

​
Class Names

Access default class names via popover.class_names:
  • ROOT: Root container styling
  • TRIGGER: Trigger button styling
  • BACKDROP: Backdrop overlay styling
  • PORTAL: Portal styling
  • POSITIONER: Positioner styling
  • POPUP: Popup container styling
  • ARROW: Arrow element styling
  • TITLE: Title text styling
  • DESCRIPTION: Description text styling
  • CLOSE: Close button styling

​
Example

import reflex as rx
from reflex_ui import popover, button

def my_component():
    return popover.root(
        popover.trigger(
            render_=button("Show Info", variant="ghost")
        ),
        popover.portal(
            popover.positioner(
                popover.popup(
                    popover.arrow(),
                    popover.title("Information"),
                    popover.description(
                        "This is additional context"
                    ),
                    rx.text("Detailed content here")
                ),
                side="top",
                align="center"
            )
        ),
        open_on_hover=True
    )

Build docs developers (and LLMs) love

Get started for freeTalk to us