# Tooltip

> Una pista que aparece al pasar el ratón, con su atajo opcional. Componente de Pyzed para GUIs de escritorio en Python, con ejemplos y API.

Source: https://albakore.github.io/pyzed/es/library/tooltip/

:::tip[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](https://albakore.github.io/pyzed/es/library/#visualización) · [Referencia completa →](https://albakore.github.io/pyzed/es/reference/ui/#tooltip)

**Código:**

```python
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

```python
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

:::note[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.

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

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

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

```python
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.

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

```python
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](https://albakore.github.io/pyzed/es/guides/events/) y [Eventos de cada componente](https://albakore.github.io/pyzed/es/library/events/).

## Consejos

:::tip
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`

```python
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 →](https://albakore.github.io/pyzed/es/reference/ui/#tooltip)

### `pz.tooltip`

```python
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 →](https://albakore.github.io/pyzed/es/reference/widgets/#tooltip)

## Relacionados

- [Botón de icono](https://albakore.github.io/pyzed/es/library/icon-button/): Un botón cuadrado con solo un icono y un tooltip opcional.
- [Kbd](https://albakore.github.io/pyzed/es/library/kbd/): Atajos de teclado dibujados como teclas, con símbolos en macOS.
- [Popover](https://albakore.github.io/pyzed/es/library/popover/): Contenido flotante en un punto: menús contextuales, selectores de color.