Saltar al contenido principal

Tooltips

Los tooltips o descripciones emergentes, aparecen al situarse sobre un elemento y proporcionan información adicional.

Ejemplo
Aquí se muestra la información adicional

En el ejemplo anterior, al colocar el cursor encima del icono que hay al lado del control de formulario, aparece información adicional.

Para crear un tooltip accesible hay que tener en cuenta las siguientes consideraciones:

  • Indicar que se trata de una descripción emergente con el rol tooltip.

  • Asociar la descripción emergente con el elemento al que hace referencia con el atributo aria-describedby.

  • Hacer que el elemento que activa el tooltip pueda enfocarse con el teclado (cuando no se trata de un enlace, botón o control de formulario). Esto se consigue con el atributo tabindex="0".

  • El texto del tooltip debe estar oculto visualmente pero ser accesible a los lectores de pantalla.

Veamos ahora el código del ejemplo:

HTML
<label for="usuario">Usuario</label>
<input id="usuario" type="text" aria-describedby="Tooltip">
<span tabindex="0" class="tooltip" id="Tooltip" role="tooltip">
    <span class="icon" aria-hidden="true">?</span>      
    <span class="tooltip-content screen-reader">Aquí se muestra la información adicional</span>
</span>
CSS
.tooltip {
  position: relative; 
}

.tooltip-content {
  display: block;
  height: auto;
  left: 0;
  opacity: 0;
  padding: 0.5em;
  text-align: center;
  transition: opacity 0.3s;
  width: 180px;
  z-index: 1; 
}

.tooltip:hover .tooltip-content, 
.tooltip:focus .tooltip-content {
  clip: auto;
  opacity: 1;
  overflow: visible; 
}