Variados Tooltips simples con CSS

Un tooltip es un globo flotante el cual muestra información al situar el mouse sobre una zona de texto, permite dar información sobre la zona que se está señalando.

En esta oportunidad traigo una lista de tooltips simples hechos con CSS, son en total 16 y de distintos colores (No hice más porque la idea son de respetar los colores en 4bits, si hiciera 8bits serían 256 tooltips).

Puedes ver trabajando los tooltips en este Blog de pruebas.

Paso 1: Añadiendo el CSS:

Primero, vamos a ''Diseño | Edición HTML'', en donde buscamos la siguiente sección:

</head>

Arriba de ésta, pegaremos el siguiente código:

<style type="text/css">
.tooltip {
border-bottom: 1px dotted #000000; color: #000000; outline: none;
cursor: help; text-decoration: none;
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}
.tooltip:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 250px;
}
.tooltip:hover img {
border: 0; margin: -10px 0 0 -55px;
float: left; position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
* html a:hover { background: transparent; }
.black {padding:4px; background: #000; border: 1px solid #FFAD33; color: #fff; }
.navy {padding:4px; background: #000080; border: 1px solid #dadada; color: #fff;}
.blue {padding:4px; background: #0000FF; border: 1px solid #dadada; color: #fff;}
.teal {padding:4px; background: #008080; border: 1px solid #FFAD33; color: #fff; }
.aqua {padding:4px; background: #00FFFF; border: 1px solid #FFAD33; color: #000; }
.silver {padding:4px; background: #C0C0C0; border: 1px solid #FFAD33; color: #000; }
.gray {padding:4px; background: #808080; border: 1px solid #FFAD33; color: #000; }
.yellow {padding:4px; background: #FFFF00; border: 1px solid #FFAD33; color: #000; }
.green {padding:4px; background: #008000; border: 1px solid #FFAD33; color: #000; }
.olive {padding:4px; background: #808000; border: 1px solid #FFAD33; color: #000; }
.lime {padding:4px; background: #00FF00; border: 1px solid #FFAD33; color: #000; }
.red {padding:4px; background: #FF0000; border: 1px solid #FFAD33; color: #fff; }
.maroon {padding:4px; background: #990000 ; border: 1px solid #FFAD33; color: #fff; }
.white {padding:4px; background: #FFF; border: 1px solid #FFAD33; color: #000; }
.fuchsia {padding:4px; background: #FF00FF; border: 1px solid #FFAD33; color: #000; }
.purple {padding:4px; background: #800080; border: 1px solid #FFAD33; color: #fff; }
</style>

Paso 2: Añadiendo un tooltip:

La estructura del tooltip es la siguiente:

<a class="tooltip" href="#">TEXTO<span class="color">CONTENIDO DEL TOOLTIP
</span></a>

 Deberás reemplazar ''color'' por el color deseado, puedes elegir entre los siguientes:

• black
• navy
• blue
• teal
• aqua
• silver
• gray
• yellow
• green
• olive
• lime
• red
• maroon
• white
• fuchsia
• purple