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.
rx.popover.root(
rx.popover.trigger(
rx.button("Popover"),
),
rx.popover.content(
rx.flex(
rx.text("Simple Example"),
rx.popover.close(
rx.button("Close"),
),
direction="column",
spacing="3",
),
),
)rx.popover.root(
rx.popover.trigger(
rx.button("Comment", variant="soft"),
),
rx.popover.content(
rx.flex(
rx.avatar("2", fallback="RX", radius="full"),
rx.box(
rx.text_area(
placeholder="Write a comment…",
style={"height": 80},
),
rx.flex(
rx.checkbox("Send to group"),
rx.popover.close(
rx.button("Comment", size="1")
),
spacing="3",
margin_top="12px",
justify="between",
),
flex_grow="1",
),
spacing="3",
),
style={"width": 360},
),
)rx.popover.root(
rx.popover.trigger(
rx.button("Feedback", variant="classic"),
),
rx.popover.content(
rx.inset(
side="top",
background="url('https://source.unsplash.com/random/800x600') center/cover",
height="100px",
),
rx.box(
rx.text_area(
placeholder="Write a comment…",
style={"height": 80},
),
rx.flex(
rx.checkbox("Send to group"),
rx.popover.close(
rx.button("Comment", size="1")
),
spacing="3",
margin_top="12px",
justify="between",
),
padding_top="12px",
),
style={"width": 360},
),
)Floating element for displaying rich content, triggered by a button.
Contains content to be rendered in the open popover.
Wraps the control that will open the popover.
Props
No component specific props
Event Triggers
See the full list of default event triggersWraps the control that will close the popover.
Props
No component specific props