Tooltips sexis solo con CSS

Si bien existen muchas soluciones innovadoras usando CSS y una de ellas es la que ha realizado Alex Dawson en Six revisions con unos sexis tooltips muy elegantes.


Estos son los ejemplos que pudo realizar:
ClásicoLorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu., CriticoCriticoLorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu., AyudaAyudaLorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu., InformaciónInformaciónLorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu. y AlertaAlertaLorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu.

Este es el HTML (entrada o como HTML/Javascript):

<!-- Clásico -->
<a class="tooltip" href="#">Clásico<span class="clasico">Lorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu.</span></a>

<!-- Critico -->
<a class="tooltip" href="#">Critico<span class="cos critico"><img src="Url-de-icono-critico" height="48" width="48" /><em>Critico</em>Lorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu.</span></a>

<!-- Ayuda -->
<a class="tooltip" href="#">Ayuda<span class="cos ayuda"><img src="Url-de-icono-ayuda" height="48" width="48" /><em>Ayuda</em>Lorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu.</span></a>

<!-- Información -->
<a class="tooltip" href="#">Información<span class="cos informacion"><img src="Url-de-icono-informacion" height="48" width="48" /><em>Información</em>Lorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu.</span></a>

<!-- Alerta -->
<a class="tooltip" href="#">Alerta<span class="cos alerta"><img src="Url-de-icono-alerta" height="48" width="48" /><em>Alerta</em>Lorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu.</span></a>

.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;
  }
.clasico { padding: 0.8em 1em; }
.cos { padding: 0.5em 0.8em 0.8em 2em; }
 a:hover { background: transparent; }
.clasico { background: #FFFFAA; border: 1px solid #FFAD33; }
.critico { background: #FFCCAA; border: 1px solid #FF3334; }
.ayuda { background: #9FDAEE; border: 1px solid #2BB0D7; }
.informacion { background: #9FDAEE; border: 1px solid #2BB0D7;}
.alerta { background: #FFFFAA; border: 1px solid #FFAD33; }