> For AI agents: the complete documentation index is at [llms.txt](https://reflex.dev/docs/llms.txt). Markdown versions are available by appending `.md` or sending `Accept: text/markdown`. --- components: - rx.hover_card.root - rx.hover_card.content - rx.hover_card.trigger only_low_level: - True HoverCardRoot: | lambda **props: rx.hover_card.root( rx.hover_card.trigger( rx.link("Hover over me"), ), rx.hover_card.content( rx.text("This is the tooltip content."), ), **props ) HoverCardContent: | lambda **props: rx.hover_card.root( rx.hover_card.trigger( rx.link("Hover over me"), ), rx.hover_card.content( rx.text("This is the tooltip content."), **props ), ) --- ```python exec import reflex as rx ``` # 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. ```python demo 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 hovercard content."), ), ), ) ``` ```python demo 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://images.unsplash.com/5/unsplash-kitsune-4.jpg') 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}, ), ), ) ``` ## 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. ```python demo exec class HovercardState(rx.State): num_opens: int = 0 opened: bool = False @rx.event 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 hover card. ", 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", ) ``` ## API Reference ### rx.hover_card.root For sighted users to preview content available behind a link. #### Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `default_open` | bool | - | The open state of the hover card when it is initially rendered. Use when you do not need to control its open state. | | `open` | bool | - | The controlled open state of the hover card. Must be used in conjunction with onOpenChange. | | `open_delay` | int | - | The duration from when the mouse enters the trigger until the hover card opens. | | `close_delay` | int | - | The duration from when the mouse leaves the trigger until the hover card closes. | #### Event Triggers Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/ Component-specific event triggers: | Event Trigger | Description | | --- | --- | | `on_open_change` | Fired when the open state changes. | ### rx.hover_card.content Contains the content of the open hover card. #### Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `access_key` | str | - | Provides a hint for generating a keyboard shortcut for the current element. | | `auto_capitalize` | Literal["off", "none", "on", "sentences", "words", "characters"] | - | Controls whether and how text input is automatically capitalized as it is entered/edited by the user. | | `content_editable` | Literal["inherit", "plaintext-only"], bool | - | Indicates whether the element's content is editable. | | `context_menu` | str | - | Defines the ID of a element which will serve as the element's context menu. | | `dir` | str | - | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left). | | `draggable` | bool | - | Defines whether the element can be dragged. | | `enter_key_hint` | Literal["enter", "done", "go", "next", "previous", "search", "send"] | - | Hints what media types the media element is able to play. | | `hidden` | bool | - | Defines whether the element is hidden. | | `input_mode` | Literal["none", "text", "tel", "url", "email", "numeric", "decimal", "search"] | - | Defines the type of the element. | | `item_prop` | str | - | Defines the name of the element for metadata purposes. | | `lang` | str | - | Defines the language used in the element. | | `role` | Literal["alert", "alertdialog", "application", "article", "banner", "button", "cell", "checkbox", "columnheader", "combobox", "complementary", "contentinfo", "definition", "dialog", "directory", "document", "feed", "figure", "form", "grid", "gridcell", "group", "heading", "img", "link", "list", "listbox", "listitem", "log", "main", "marquee", "math", "menu", "menubar", "menuitem", "menuitemcheckbox", "menuitemradio", "navigation", "none", "note", "option", "presentation", "progressbar", "radio", "radiogroup", "region", "row", "rowgroup", "rowheader", "scrollbar", "search", "searchbox", "separator", "slider", "spinbutton", "status", "switch", "tab", "table", "tablist", "tabpanel", "term", "textbox", "timer", "toolbar", "tooltip", "tree", "treegrid", "treeitem"] | - | Defines the role of the element. | | `slot` | str | - | Assigns a slot in a shadow DOM shadow tree to an element. | | `spell_check` | bool | - | Defines whether the element may be checked for spelling errors. | | `tab_index` | int | - | Defines the position of the current element in the tabbing order. | | `title` | str | - | Defines a tooltip for the element. | | `side` | Literal["top", "right", "bottom", "left"], Breakpoints[str, Literal["top", "right", "bottom", "left"]] | - | The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled. | | `side_offset` | int | - | The distance in pixels from the trigger. | | `align` | Literal["start", "center", "end"] | - | The preferred alignment against the trigger. May change when collisions occur. | | `align_offset` | int | - | An offset in pixels from the "start" or "end" alignment options. | | `avoid_collisions` | bool | - | Whether or not the hover card should avoid collisions with its trigger. | | `collision_padding` | float, int, dict[str, float, int] | - | The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }. | | `sticky` | Literal["partial", "always"] | - | The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. | | `hide_when_detached` | bool | - | Whether to hide the content when the trigger becomes fully occluded. | | `size` | Literal["1", "2", "3"], Breakpoints[str, Literal["1", "2", "3"]] | - | Hovercard size "1" - "3". | #### Event Triggers Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/ ### rx.hover_card.trigger Wraps the link that will open the hover card. #### Event Triggers Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/