Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

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.

Number of times hovercard opened or closed: 0

Hovercard open: false

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.

PropTypeDescriptionValues
default_openbool

The open state of the hover card when it is initially rendered. Use when you do not need to control its open state.

openbool

The controlled open state of the hover card. Must be used in conjunction with onOpenChange.

open_delayint

The duration from when the mouse enters the trigger until the hover card opens.

close_delayint

The duration from when the mouse leaves the trigger until the hover card closes.

Event Triggers

TriggerDescription
on_open_change

The on_open_change event handler is called when the open state of the component changes.

Contains the content of the open hover card.

PropTypeDescriptionValues
sideLiteral

The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.

side_offsetint

The distance in pixels from the trigger.

alignLiteral

The preferred alignment against the trigger. May change when collisions occur.

avoid_collisionsbool

Whether or not the hover card should avoid collisions with its trigger.

Event Triggers

No component specific event triggers

Wraps the link that will open the hover card.

Props

No component specific props

Event Triggers

No component specific event triggers

← DropdownmenuPopover →

Did you find this useful?