# Tooltip
> Texto corto que aparece al pasar el cursor o enfocar un elemento.
Categoría: Feedback · Solar v0.8.0
Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html).
## Etiqueta
```html
EditarDescargar PDFCompartirEliminar
Pasa el cursor sobre los íconos.
```
## Posiciones
```html
ArribaAbajoIzquierdaDerecha
```
## Alineación
```html
InicioCentroFin
```
## Descripción
```html
Número de seis dígitos que identifica el giro de tu empresa. Aparece en tu inicio de actividades.
Pasa el cursor sobre el ícono de información.
```
## Con atajo
```html
Guardar CtrlS
Pasa el cursor sobre el ícono.
```
## Guía: Comportamiento
Solar no entrega JavaScript: el tooltip se muestra y se oculta solo con CSS. Lo que sigue es lo que debe pasar; solo cerrar con Esc necesita unas líneas de tu proyecto.
- Mostrar: aparece con el cursor encima del botón o cuando el botón recibe el foco con el teclado (group-hover y group-has-[:focus-visible]). No aparece con un clic ni con un toque: en el teléfono, el botón tiene que entenderse sin el tooltip.
- Se puede pasar el cursor por encima: el tooltip está dentro del mismo contenedor que el botón y el espacio entre ambos (pb-2) es parte del tooltip, así que no se cierra al mover el cursor hacia el texto.
- Se queda: sigue visible mientras el cursor o el foco estén en el botón o en el tooltip. No se cierra solo por tiempo.
- Cerrar con Esc: la persona tiene que poder ocultarlo sin mover el cursor ni el foco, porque puede tapar lo que está leyendo. Agrega el código de abajo: marca el contenedor con data-cerrado, y ccs-ui-kit.css oculta el tooltip. Vuelve a aparecer la próxima vez que pase el cursor o el foco.
- Nombre: en un botón de solo ícono, el nombre va en aria-label y el tooltip lleva aria-hidden="true" para no repetirlo. Si el tooltip agrega una descripción, el botón lo enlaza con aria-describedby.
- Contenido: solo texto. Nada que se pueda hacer clic adentro; para eso, usa Popover.
document.addEventListener('keydown', function (e) {
if (e.key !== 'Escape') return;
document.querySelectorAll('[data-tooltip]:hover, [data-tooltip]:focus-within')
.forEach(function (w) { w.setAttribute('data-cerrado', ''); });
});
document.querySelectorAll('[data-tooltip]').forEach(function (w) {
function rearmar() { w.removeAttribute('data-cerrado'); }
w.addEventListener('mouseleave', rearmar);
w.addEventListener('focusout', rearmar);
});
Por qué: Es lo que pide WCAG 2.2 para contenido que aparece con el cursor o el foco (criterio 1.4.13): que se pueda cerrar, que se pueda pasar el cursor por encima y que no desaparezca mientras se está usando. Con CSS se logran los dos últimos; cerrar con Esc requiere escuchar el teclado.