Reflex Logo
Docs Logo
Library

/

Overlay

/

Hover Card

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

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_changeFired when the open state changes.

rx.hover_card.content

Contains the content of the open hover card.

PropType | ValuesDefaultInteractive
access_key
str
-
auto_capitalize
"off" | "none" | ...
-
content_editable
Union["inherit" | "plaintext-only", bool]
-
context_menu
str
-
dir
str
-
draggable
bool
-
enter_key_hint
"enter" | "done" | ...
-
hidden
bool
-
input_mode
"none" | "text" | ...
-
item_prop
str
-
lang
str
-
role
"alert" | "alertdialog" | ...
-
slot
str
-
spell_check
bool
-
tab_index
int
-
title
str
-
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

Built with Reflex