Crear un tooltip con CSS de forma muy fácil

Para que aún no lo conozcan un Tooltip es un recuadro que suele aparecer en muchas aplicaciones y sitios web, aparece cuando dejamos el cursos quieto en un botón o un link y un recuadrito aparece diciéndonos algo, ya sea para que sirve el botón o a donde va el enlace. Pueden probarlo en Office 2007 o 2010 ya que es un ejemplo muy claro en la suite.

Pues bien, revisando el blog de ciudadblogger encontré un tutorial muy bueno y sencillo para crear tooltips donde sea usando CSS, con la gran posibilidad de que podemos personalizarlo como queramos. Después del salto vamos a aprender a crear uno de la manera más sencilla que se podrían imaginar.

CSS

Como siempre, tenemos que hacer nuestros estilos css, para ello les dejo el código. Básicamente les explico lo que hacemos con los estilos. Tenemos la etiqueta <a> con una clase tooltip, tooltip:hover y tooltip:hover span donde modificaremos en general las propiedades del tooltip. De hecho podemos dejar todos los estilos intactos excepto a.tooltip:hover span ya que ahí se define el color de fondo, el borde, el ancho y el alto, y el justificado del texto (alineado a la izquierda, derecha o centro), así como el color del texto, entonces si queremos modificar algo tenemos que usar esas propiedades.

a.tooltip { /* Estilos del texto que tiene el tooltip */
  position: relative;
  z-index: 24;
  cursor: help;
  text-decoration: underline;
}

a.tooltip:hover {z-index: 25; text-decoration: none;}

a.tooltip span {display: none}

a.tooltip:hover span { /* Estilos de la descripción */
  display: block;
  position: absolute;
  top: 2em;
  left: 2em;
  width: 16em;
  border: 1px solid #0cf;
  background: #ECE0F8;
  color: #000;
  text-align: center;
}

HTML

Entonces una vez que ya tenemos el código css listo procedemos a implementar nuestro tooltip agregando el siguiente código:

<a class="tooltip">Pasa el cursor aquí<span>Este es el mensaje que se mostrará al pasar el cursor.</span></a>

La estructura es fácil de hacer, todo está englobado en una etiqueta <a>, la cual tiene una clase tooltip, no tiene link pero puedes agregárselo si quieres. En el cuerpo hay un texto y adelante está la etiqueta <span></span> que nos va apermitir agregar texto y con los estilos en vez de que aparezca el texto a lado del primero, aparecerá como cuadrito flotante cuando pongamos el mouse encima del primer texto.