Agregar a favoritos
Tipo 01
Simple
Una etiqueta oscura y corta.
Componentes Información emergente (tooltips)
Información emergente (tooltips)
Un tooltip es una etiqueta breve que aparece al pasar el mouse, enfocar o mantener presionado un elemento, y explica qué hace.
EditarCompartirDescargarEliminar
Uso
Úsalos para nombrar botones de solo ícono o dar una aclaración corta que no cabe en la interfaz.
- Nombrar íconos sin texto
- Mostrar el texto completo de algo recortado
- Información importante: puede no verse en celular
- Textos largos o con enlaces: usa una tarjeta o diálogo
Principios
1
Breve
Pocas palabras, sin punto final.
2
Bajo demanda
Solo aparece cuando el usuario lo pide.
3
No tapa
Aparece cerca sin cubrir el elemento.
Tipos
Nota ponderadaPromedio con el peso de cada taller.
Tipo 02
Enriquecido
Título, texto y a veces una acción (versiones recientes de Material).
Anatomía
Descargar certificado123
- Contenedor
- Texto
- Elemento que lo activa
Comportamiento
EditarCompartirDescargar
- Aparece tras una breve pausa al pasar el mouse (unos 500 ms).
- En celular aparece con una presión larga.
- Se oculta al quitar el mouse, el foco o el dedo.
Medidas
| Medida | Valor de referencia |
|---|---|
| Alto | 24 dp (escritorio) / 32 dp (celular) |
| Texto | 10 a 14 sp |
| Margen interno | 8 dp (16 en celular) |
| Distancia al elemento | 8 a 14 dp |
| Radio | 4 dp |
Medidas de Material Design 2 en dp (en web, 1 dp ≈ 1 px de CSS; en iOS, 1 pt). Son de referencia: verifícalas en la guía oficial antes de usarlas en una evaluación.
Accesibilidad
Teclado
Debe aparecer también con el foco del Tab.
Relación
aria-describedby une el botón con el tooltip.
Esc
Esc lo oculta sin mover el foco (WCAG 1.4.13).