UITooltips y popovers
Pequeñas notas flotantes junto a un elemento: el tooltip lo nombra, el popover lo explica.
Un tooltip es un nombre o una pista de una línea que aparece al pasar el ratón y al enfocar. Un popover es una tarjeta pequeña con título y unas líneas, que se abre al hacer clic. Ninguno contiene nada que el usuario necesite para continuar.
Cuándo usarlo
Úsalo
- Tooltip: nombrar un botón solo con icono, o dar una pista corta.
- Popover: explicar un término o un ajuste en dos o tres líneas.
- Abrirlos también al enfocar, no solo al pasar el ratón.
No
- Meter información esencial, enlaces o botones en un tooltip.
- Usar un popover para un formulario o un texto largo; usa un diálogo o una página.
- Tapar el elemento que describen.
Anatomía
Un tooltip es una caja (tooltip) con una flecha y un texto interior. Un popover es una caja (popover) con una flecha, un encabezado y un cuerpo. Los dos señalan a su disparador desde el lado que tiene sitio.
Variantes y estados
Esta versión de Moodle no tiene modo oscuro: los ejemplos se quedan en claro.
Enrolment key
Esta versión de Moodle no tiene modo oscuro: los ejemplos se quedan en claro.
La pista de un título
Un botón solo con icono, un enlace que abre en otro sitio o una insignia que necesita explicación llevan un title. El navegador dibuja ese texto en una caja gris que no se puede estilar, así que el sistema de diseño lo muestra en su propia pista: una burbuja oscura con una flecha, algo más redondeada con el tema de Didactika. Aparece tras una espera corta bajo el puntero y al instante con el teclado, se va al salir, al hacer clic, con Escape y al desplazar, y mantiene un nombre accesible para el elemento. Pasa el puntero o el tabulador por los ejemplos de abajo.
Esta versión de Moodle no tiene modo oscuro: los ejemplos se quedan en claro.
La pista es para una etiqueta corta (unas pocas palabras). Algo más largo, con un enlace o un botón, es un popover.
Combinaciones
| Combinación | Para qué usarla |
|---|---|
| Tooltip × botón de icono | Nombra un botón que solo tiene un icono; siempre junto a su aria-label. |
| Popover × término | Explica un término o un ajuste en dos o tres líneas, abierto con un clic. |
| Colocación | Arriba por defecto; la nota pasa al otro lado cuando no hay sitio. |
Qué cambia Didactika y por qué
| Qué cambiamos | Por qué ayuda |
|---|---|
| El tooltip es oscuro con texto claro | Es lo único oscuro que flota, así que nunca se confunde con contenido, y se lee sobre cualquier fondo. |
| El popover es una tarjeta con título y un cuerpo discreto | Es una pequeña página propia: tiene encabezado y espacio, no solo una caja de color. |
| Se voltean cuando no hay sitio | La nota nunca se corta en el borde de la pantalla o de su contenedor. |
Clases
| Clase | Qué hace |
|---|---|
tooltip, tooltip-inner |
La nota y su texto |
popover, popover-header, popover-body |
La tarjeta y sus partes |
tooltip-arrow, popover-arrowarrow |
El puntero |
data-bs-toggle, data-bs-placement |
Qué lo abre y de qué lado |
En esta versión
Bootstrap 5.3 guarda sus colores en variables CSS (--bs-*), así que un tema recolorea el componente con una sola variable. Los lados son top, bottom, start y end.
Bootstrap 4.6 compila sus colores en las clases, así que un tema recolorea el componente recompilando su hoja de estilos. Los lados son top, bottom, left y right.
Bootstrap 4.6 compila sus colores en las clases, así que un tema recolorea el componente recompilando su hoja de estilos. Los lados son top, bottom, left y right.
Accesibilidad
- El disparador es enfocable y el tooltip se abre al enfocar, y Escape lo cierra.
- Un tooltip se enlaza con
aria-describedby; no lo uses como única etiqueta de un control. - A un popover se llega con el teclado y se cierra con Escape.