CSS | Desde cero | Parte 3

Continuando con los tutoriales de CSS, esta vez veremos como crear un  "tooltip" utilizando solo CSS. Pero ¿Que es un tooltip? Es un mensaje que nos muestra una ayuda adicional. Pulsando aqui podemos ver un ejemplo

Sobre un vínculo.Texto a Mostrar

Para realizar este sencillo efecto, solo son necesaios 2 pasos. Como anteriormente habiamos visto la propiedad hover, que se utilizaba al pasar el cursor sobre algun elemento, esta vez lo utilizaremos para hacer aparecer el tooltip. Lo primero que haremos será crear  un documento HTML,y agregaremos la siguiente hoja de estilo:

a.tooltip span {
   display:none;
   margin:5px;
   padding:5px;
}

Con esto lograremos que las etiquetas span dentro de cualquier vínculo con la clase "tooltip" no sea visible aún, además de agregarle relleno y margen 5 px. Ahora tenemos que hacer que el tooltip aparezca, y eso lo conseguiremos con el siguiente código.

a.tooltip:hover span{
   display:inline;
   border:1px solid #333;
   background:#999;
   color:#eee;
}