Tooltip
Los tooltips son elementos flotantes que proporcionan información adicional sobre un elemento cuando el usuario hace hover o focus sobre él.
Colocación
La posición de los tooltips es flexible, pueden colocarse en la parte superior , inferior , izquierda o derecha del elemento desencadenante.
Si se van a colocar sobre una imagen o fondo oscuro, se utilizarán en el color inverso; si van sobre un fondo claro utilizarán en el color default del theme.
Recomendaciones de uso
¿Qué hacer?
- Su uso es para proporcionar una breve descripción de un elemento de la interfaz.
- Permiten describir la acción de un icono que funciona como botón.
- Revelar texto de datos truncados.
¿Qué no hacer?
- Utilizar descripciones muy largas, en ese caso usar popover
- Introducir elementos interactivos, n ese caso usar popover
Estilos
Color
- Modo Default
| Nombre | Propiedad | Color token |
|---|---|---|
| Tooltip:box | background color | $UI-06 |
| Tooltip:label | text color | $text-05 |
- Modo Inverse
| Nombre | Propiedad | Color token |
|---|---|---|
| Tooltip:box | background color | $inverse-01 |
| Tooltip:label | text color | $text-01 |
Tipografía
| Nombre | Tamaño fuente (px/rem) | Font weight | Type style |
|---|---|---|---|
| Tooltip: label L | 13/0.813 | Extrabold / 800 | $Body Small |
| Tooltip: label M | 11/0.688 | Extrabold / 800 | $Body Small |
| Tooltip: label S | 10/0.625 | Extrabold / 800 | $$Body Small |
Estructura
