ReflexKR

El taller de componentes: los 100 componentes de Reflex

Resumen del curso

Diseño

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Tipografía

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formularios

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Visualización de datos

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Mostrar y ocultar

Tabs

Accordion

Segmented Control

Superposiciones

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Renderizado dinámico

Cond

Match

Foreach

Auto Scroll

Multimedia

Image

Audio

Video

Tablas y cuadrículas de datos

Table

Data Table

Data Editor

Gráficos

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Piezas de gráficos

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Otras bibliotecas de gráficos

Plotly

Pyplot

Elementos HTML

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Otras herramientas

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

El taller de componentes: los 100 componentes de Reflex

Superposiciones

Tooltip

rx.tooltip

Documentación oficial

Pedido del taller

En una barra de herramientas de edición que solo tiene iconos, añade una breve descripción que diga qué hace cada botón al pasar el ratón por encima.

rx.tooltip es una pequeña descripción que aparece un momento al pasar el ratón sobre un elemento o al llevarle el foco con el teclado. El elemento que envuelve va como hijo y el texto que se muestra se pasa con la propiedad content. Su uso más habitual es poner nombre a elementos sin texto, como los botones de icono.

rx.tooltip(
    rx.button("Hover over me"),
    content="This is the tooltip content.",
)

Prueba las propiedades

Casi todas las propiedades del tooltip deciden su posición. Cambia un valor y pasa el ratón por encima del botón. delay_duration es el tiempo de espera (en milisegundos) desde que el ratón llega hasta que aparece.

Prueba las propiedades

content

side

align

side_offset

delay_duration

700

avoid_collisions

rx.tooltip(
    rx.button("Hover me", variant="soft"),
    content="Save changes",
    side="top",
    align="center",
    side_offset=4,
    delay_duration=700,
    avoid_collisions=True,
)

side decide en qué lado aparece, align dónde se alinea dentro de ese lado y side_offset la separación con el botón.

Propiedad	Valores	Por defecto	Uso
`content`	Cadena	-	Texto que muestra el tooltip
`side`	`"top"` `"right"` `"bottom"` `"left"`	`"top"`	Lado en el que aparece
`align`	`"start"` `"center"` `"end"`	`"center"`	Alineación dentro de ese lado
`side_offset` · `align_offset`	Número (px)	-	Separación con el elemento y desplazamiento extra desde la alineación
`avoid_collisions`	`True` / `False`	`True`	Pasar al lado opuesto al chocar con el borde de la pantalla
`collision_padding`	Número o dict por lado	-	Margen que se considera borde de la pantalla
`arrow_padding`	Número (px)	-	Margen entre la flecha y las esquinas
`sticky`	`"partial"` `"always"`	`"partial"`	Cuánto sigue pegado al elemento al hacer scroll
`hide_when_detached`	`True` / `False`	`False`	Ocultar el tooltip cuando el elemento queda tapado
`delay_duration`	Milisegundos	`700`	Tiempo de espera hasta que aparece
`disable_hoverable_content`	`True` / `False`	-	Cerrarse aunque el ratón pase al propio tooltip
`default_open`	`True` / `False`	-	Abierto en el primer renderizado (no controlado)
`open`	`True` / `False`	-	Decidir la apertura desde el State (controlado)
`force_mount`	`True` / `False`	-	Mantenerlo en el DOM aunque esté cerrado (para librerías de animación)
`aria_label`	Cadena	-	Nombre que leen los lectores de pantalla
`on_open_change`	Evento	-	Al abrirse o cerrarse. Pasa el nuevo valor de apertura (bool)
`on_escape_key_down`	Evento	-	Al pulsar la tecla Esc
`on_pointer_down_outside`	Evento	-	Al pulsar fuera del tooltip

Los cuatro lados

side es solo el lado preferido. Si allí no hay sitio, avoid_collisions hace que aparezca en el lado opuesto.

rx.flex(
    rx.tooltip(rx.button("top", variant="outline"), content="side=top", side="top"),
    rx.tooltip(rx.button("right", variant="outline"), content="side=right", side="right"),
    rx.tooltip(rx.button("bottom", variant="outline"), content="side=bottom", side="bottom"),
    rx.tooltip(rx.button("left", variant="outline"), content="side=left", side="left"),
    spacing="3",
    wrap="wrap",
)

Al abrirse y cerrarse: on_open_change

Cada vez que el tooltip se abre o se cierra se llama a on_open_change, y el handler recibe el nuevo valor de apertura (True/False). El ejemplo de abajo muestra cuántas veces ha ocurrido y el estado actual.

Opened or closed: 0 times

Tooltip open: no

class TooltipEventState(rx.State):
    num_opens: int = 0
    opened: bool = False

    @rx.event
    def count_opens(self, value: bool):
        self.opened = value
        self.num_opens += 1


rx.flex(
    rx.text("Opened or closed: ", TooltipEventState.num_opens, " times"),
    rx.text("Tooltip open: ", rx.cond(TooltipEventState.opened, "yes", "no")),
    rx.tooltip(
        rx.button("Hover over me"),
        content="This is the tooltip content.",
        on_open_change=TooltipEventState.count_opens,
    ),
    direction="column",
    spacing="3",
    align="start",
)

Abrir y cerrar desde el State

Si conectas un valor del State a open, la apertura la decide el código. En ese caso conecta también on_open_change, para que lo que se abra o cierre con el ratón vuelva al State. Abajo puedes dejar la ayuda visible con el botón o abrirla pasando el ratón por el campo de texto.

class TooltipControlState(rx.State):
    show: bool = False

    @rx.event
    def set_show(self, value: bool):
        self.show = value

    @rx.event
    def toggle(self):
        self.show = not self.show


rx.flex(
    rx.tooltip(
        rx.input(placeholder="Coupon code", width="12em"),
        content="Codes are 8 letters, e.g. SPRING24",
        open=TooltipControlState.show,
        on_open_change=TooltipControlState.set_show,
        side="right",
    ),
    rx.button(
        rx.cond(TooltipControlState.show, "Hide hint", "Show hint"),
        on_click=TooltipControlState.toggle,
        variant="soft",
    ),
    spacing="3",
    align="center",
    wrap="wrap",
)

Otras propiedades

default_open=True lo deja abierto solo al principio; después se abre y se cierra con el ratón como siempre. Con disable_hoverable_content activado, se cierra en cuanto el ratón pasa al tooltip. Si content es tan corto que no se entiende, da un nombre aparte para los lectores de pantalla con aria_label.

rx.flex(
    rx.tooltip(rx.button("default_open"), content="Open on first render", default_open=True, side="bottom"),
    rx.tooltip(rx.button("disable_hoverable_content", variant="soft"), content="Closes as soon as you leave the button",
               disable_hoverable_content=True),
    rx.tooltip(rx.icon_button(rx.icon("info"), variant="ghost"), content="?", aria_label="More information about this field"),
    spacing="3",
    wrap="wrap",
    align="center",
)

Completar el pedido

Cada botón de icono recibe su nombre con un tooltip, y side="bottom" hace que aparezca debajo de la barra. También reducimos delay_duration para que la espera sea corta mientras el ratón recorre la barra.

rx.flex(
    rx.tooltip(rx.icon_button(rx.icon("bold"), variant="ghost", aria_label="Bold"), content="Bold (Ctrl+B)", side="bottom", delay_duration=200),
    rx.tooltip(rx.icon_button(rx.icon("italic"), variant="ghost", aria_label="Italic"), content="Italic (Ctrl+I)", side="bottom", delay_duration=200),
    rx.tooltip(rx.icon_button(rx.icon("underline"), variant="ghost", aria_label="Underline"), content="Underline (Ctrl+U)", side="bottom", delay_duration=200),
    rx.separator(orientation="vertical", size="1"),
    rx.tooltip(rx.icon_button(rx.icon("link"), variant="ghost", aria_label="Insert link"), content="Insert link", side="bottom", delay_duration=200),
    spacing="2",
    align="center",
    padding="6px",
    border=f"1px solid {rx.color('gray', 6)}",
    border_radius="8px",
    width="fit-content",
)

Notas del taller

rx.tooltip(elemento, content="texto"): aparece al pasar el ratón o al recibir el foco.
La posición la deciden side · align · side_offset; el borde de la pantalla, avoid_collisions · collision_padding.
delay_duration ajusta cuánto tarda en aparecer (700 ms por defecto).
on_open_change pasa el nuevo valor de apertura (bool). Si controlas open desde el State, conéctalo siempre también.
El tooltip es una ayuda secundaria. Lo que hay que saber sí o sí, o lo que se puede pulsar, va en un Popover o un Dialog.

← Anterior

Mostrar y ocultar · Segmented Control

Superposiciones · Popover

Recibe avisos de nuevas lecciones

Te avisaremos por correo cuando este curso tenga lecciones nuevas o se abra un curso de continuación.

Preguntas y respuestas

Pregunta lo que quieras sobre esta lección. Aquí se reúnen las preguntas de todas las versiones de idioma de esta página.

ReflexKR

Aprende Python y Reflex haciendo. Todos los ejemplos se ejecutaron y verificaron en Reflex 0.10.0.

ReflexKR es gratis y sin banners publicitarios. Si te ayudó, puedes apoyarlo con un café. ☕ Invítanos un café

Aviso de afiliados

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex