Reflex Cloud - Fast, secure & scalable hosting. One command to deploy.

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

Hover over the text to see the tooltip. Hover over me

Events when the Hovercard opens or closes

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.

Number of times hovercard opened or closed: 0

Hovercard open: false

Hover over the text to see the hover card. Hover over me

API Reference

rx.hover_card.root

For sighted users to preview content available behind a link.

PropType | ValuesDefaultInteractive
default_open
bool
open
bool
open_delay
int
close_delay
int

Event Triggers

See the full list of default event triggers
TriggerDescription
on_open_change Fired when the open state changes.

rx.hover_card.content

Contains the content of the open hover card.

PropType | ValuesDefaultInteractive
side
"top" | "right" | ...
side_offset
int
align
"start" | "center" | ...
align_offset
int
avoid_collisions
bool
collision_padding
Union[float, int, Dict]
sticky
"partial" | "always"
hide_when_detached
bool
size
"1" | "2" | ...

rx.hover_card.trigger

Wraps the link that will open the hover card.

Props

No component specific props