Tooltip a puro CSS

Bueno, siguiendo con los efectos de CSS y las posibilidades que hay en la web, vengo a explicar un poco acerca de los tooltip, estos "tooltip" son los mensajes que nos salen al pasar por cierto enlace, por ejemplo, al colocarle un titulo a una imagen obtenemos lo siguiente:

Si dejamos el mouse un rato sobre la imagen vemos que se nos muestra un mensaje con le titulo de la imagen, ese es el tooltip, bien, ahora si queremos que ese tooltip tenga un efecto mas agradable y no queremos complicarnos la vida utilizamos CSS, algo simple sería lo siguiente:

a.ToolTip, a.ToolTip:visited {
color:#c00;
position:relative;
z-index:1;
}

a.ToolTip b {
position:absolute;
visibility:hidden;
width:200px;
border:1px solid #000;
left:0;
top: -20px;
}

a.ToolTip:hover {
text-decoration:none;
border:0;
z-index:1000;
}

a.ToolTip:hover b {
visibility:visible;
height:auto;
cursor:pointer;
z-index:500;
}

a.ToolTip:hover b img {
border:0;
}

Donde tomo por referencia la etiqueta "b" que es para colocar texto en negrita (podemos cambiarla si queremos), modificando el valor top de la clase tooltip (a.ToolTip b) elegimos la posición (el alto) donde aparecera el cuadro. Defino algunos bordes en cero (0) para solventar problemas con Opera e IE.

Y el HTML es el siguiente:

El parrafo con tooltip
Mostrando el texto del tooltip

Teniendo como resultado...

El parrafo con

Esto como siempre es básico, podemos definir mas propiedades, colores y hasta agregar bordes para obtener resultados de mayor impacto visual. Podemos agregar propiedades como sombras y bordes redondeados.

-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 6px 6px 18px #171617;
-moz-box-shadow: 6px 6px 18px #171617;
box-shadow: 6px 6px 18px #171617;
padding:5px 5px 5px 5px;