Tooltip

En pocas palabras

Una cajita con una pista que aparece cuando dejas el ratón encima de algo.

Envuelve cualquier widget y muestra una caja pequeña con el estilo del tema mientras el ratón está encima. keys= añade el atajo y position es "top", "bottom" (por defecto), "left" o "right". pz.tooltip es la versión base sin estilo.

ui.tooltip · Categoría: Visualización · Referencia completa →

Vista previa

Código

pz.row([
    ui.tooltip(ui.icon_button("save", on_save), "Save", keys="ctrl-s"),
    ui.icon_button("settings", on_settings, tooltip="Settings"),
], spacing=8)

Cuándo usarlo

• En botones de icono y controles compactos cuyo significado no es evidente.
• No escondas información esencial en un tooltip: no se ve al usar el teclado.

Uso

import pyzed as pz
from pyzed import ui

pz.row([
    ui.tooltip(ui.icon_button("save", on_save), "Save", keys="ctrl-s"),
    ui.icon_button("settings", on_settings, tooltip="Settings"),
], spacing=8)

Variantes

Sobre estas capturas

Cada captura la graba pyzed mismo, fuera de pantalla a 2x, en One Dark o One Light según el tema de este sitio, y recortada al componente para que se vea a su tamaño real. El puntero pasa por encima, pulsa o escribe en él; un componente que no reacciona al puntero recorre algunos temas. Con movimiento reducido ves el primer fotograma. Abre Código bajo una captura para ver el fragmento que la dibuja; los nombres libres como on_save son tus propios callbacks.

Posición

Dibujado tal como lo muestra el puntero: los tooltips solo se abren al pasar el ratón.

position="bottom"

Código

ui.tooltip(ui.icon_button("save", on_save), "Save")

position="top"

Código

ui.tooltip(ui.icon_button("save", on_save), "Save", position="top")

position="right"

Código

ui.tooltip(ui.icon_button("save", on_save), "Save", position="right")

position="left"

Código

ui.tooltip(ui.icon_button("save", on_save), "Save", position="left")

Contenido

Dibujado tal como lo muestra el puntero: los tooltips solo se abren al pasar el ratón.

keys="ctrl-s"

Código

ui.tooltip(ui.button("Save", on_save), "Save the file", keys="ctrl-s")

icon_button(tooltip=)

Código

ui.icon_button("settings", on_settings, tooltip="Settings")

Eventos

Tooltip no tiene eventos propios: muestra lo que le das. Como todo widget, también tiene los 18 eventos comunes (click, double_click, right_click, mouse_enter, drag, key_down, resize…), que se conectan con .on(...): mira Eventos y Eventos de cada componente.

Consejos

Consejo

Los tooltips solo aparecen al pasar el ratón, así que la vista previa muestra los botones. ui.icon_button(..., tooltip="Texto") es un atajo para envolverlo en ui.tooltip.

Propiedades y API

ui.tooltip

tooltip(content, text, *, keys=None, position='bottom', theme=None)

Envuelve content con un tooltip con el estilo del tema, opcionalmente con su atajo.

Propiedad	Por defecto	Descripción
content	obligatorio	Contenido: un Widget, un texto o un número (se convierte en texto).
text	obligatorio	Texto del tooltip.
keys	None	Atajo que se muestra al final, escrito como texto: "ctrl-s", "cmd-k cmd-s".
position	"bottom"	"top", "bottom", "left", "right" o "cursor".
theme	None	Tema a usar en lugar del actual (pyzed.theme.current()).

Referencia completa →

pz.tooltip

tooltip(
    content,
    tip,
    *,
    position='bottom',
    gap=4.0,
    bg=None,
    color=None,
    border_color=None,
    border_width=0.0,
    radius=None,
    shadow=None,
)

Muestra tip junto a content al pasar el ratón. ui.tooltip añade el estilo del tema.

Propiedad	Por defecto	Descripción
content	obligatorio	Contenido: un Widget, un texto o un número (se convierte en texto).
tip	obligatorio	Contenido del tooltip.
position	"bottom"	"top", "bottom", "left", "right" o "cursor".
gap	4.0	Distancia al contenido.
bg	None	Color de fondo ("#rrggbb[aa]", (r, g, b[, a]) o "transparent").
color	None	Color del texto o del icono.
border_color	None	Color del borde.
border_width	0.0	Grosor del borde en píxeles.
radius	None	Radio de las esquinas: un número o (sup_izq, sup_der, inf_der, inf_izq).
shadow	None	Sombra: (color, (dx, dy), desenfoque).

Referencia completa →

Relacionados

Botón de iconoUn botón cuadrado con solo un icono y un tooltip opcional.

KbdAtajos de teclado dibujados como teclas, con símbolos en macOS.

PopoverContenido flotante en un punto: menús contextuales, selectores de color.