Library
/
Overlay
/
Hovercard
The hover_card.root
contains all the parts of a hover card.
The hover_card.trigger
wraps the link that will open the hover card.
The hover_card.content
contains the content of the open hover card.
Hover over the text to see the tooltip. Hover over me
rx.text(
"Hover over the text to see the tooltip. ",
rx.hover_card.root(
rx.hover_card.trigger(
rx.link(
"Hover over me",
color_scheme="blue",
underline="always",
),
),
rx.hover_card.content(
rx.text("This is the tooltip content."),
),
),
)
Hover over the text to see the tooltip. Hover over me
rx.text(
"Hover over the text to see the tooltip. ",
rx.hover_card.root(
rx.hover_card.trigger(
rx.link(
"Hover over me",
color_scheme="blue",
underline="always",
),
),
rx.hover_card.content(
rx.grid(
rx.inset(
side="left",
pr="current",
background="url('https://source.unsplash.com/random/800x600') center/cover",
height="full",
),
rx.box(
rx.text_area(
placeholder="Write a comment…",
style={"height": 80},
),
rx.flex(
rx.checkbox("Send to group"),
spacing="3",
margin_top="12px",
justify="between",
),
padding_left="12px",
),
columns="120px 1fr",
),
style={"width": 360},
),
),
)
The on_open_change
event is called when the open
state of the hovercard changes. It is used in conjunction with the open
prop, which is passed to the event handler.
Hover over the text to see the tooltip. Hover over me
class HovercardState(rx.State):
num_opens: int = 0
opened: bool = False
def count_opens(self, value: bool):
self.opened = value
self.num_opens += 1
def hovercard_example():
return rx.flex(
rx.heading(
f"Number of times hovercard opened or closed: {HovercardState.num_opens}"
),
rx.heading(
f"Hovercard open: {HovercardState.opened}"
),
rx.text(
"Hover over the text to see the tooltip. ",
rx.hover_card.root(
rx.hover_card.trigger(
rx.link(
"Hover over me",
color_scheme="blue",
underline="always",
),
),
rx.hover_card.content(
rx.text("This is the tooltip content."),
),
on_open_change=HovercardState.count_opens,
),
),
direction="column",
spacing="3",
)
For sighted users to preview content available behind a link.
Contains the content of the open hover card.
Wraps the link that will open the hover card.
No component specific props
Did you find this useful?