Crea y personaliza un Tooltip (Title) para los enlaces [1]

Si quieres que al poner el cursor sobre un enlace,  aparezca un pequeño Título o Title encima de este (que no es más que un cuadrito pequeño con una pequeña descripción) , este truco te permitirá crear y decorar los mismos fácilmente.
Si aún no sabes lo que es un Tooltip, coloca el cursor encima del siguiente texto:

Ejemplo de TooltipAyuda para Blogger

Para agregarlo sólo debes seguir los siguientes pasos:

1.  Nos dirigimos a Diseño>Edición de HTML y Expandimos Artilugios

2. Añadimos antes de ]]></b:skin> el siguiente código:

a.tooltip{
position: relative;
z-index: 24;
color: #0080FF;
text-decoration: none;
}

a.tooltip:hover{
z-index: 24;
color: #002AFE;
text-decoration: none;
}

a.tooltip:visited{
text-decoration: none;
color:#08088A;
}

a.tooltip:active{
z-index: 24;
color: #0000FF;
text-decoration: none;
}

a.tooltip span{ display: none;
}

a.tooltip:hover span{
border: 2px solid #088A08;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: block;
position: absolute;
top: 2.5em;
left: 3em;
width: 10em;
background-color: #74DF00;
color: #0B0B0B;
font-size: 8pt;
font-family: Comic Sans MS;
text-align: left;
padding-left: 2px ;
padding-right: 2px;
}

Por cierto, este código es también el empleado en la plantilla de La Trucoteca de Blogs para los Tooltips, y puedes decorarlo a tu gusto. Para ello te indicaremos algunas partes del Css que puedes modificar:

• color: #0080FF;     -> Color del enlace.

• color: #002AFE;     ->Color del enlace al pasar el cursor por encima.

• color: #08088A;     ->Color del enlace mientras se hace clic en él.

• border: 2px solid #088A08;  ->2px (grosor del borde del tooltip), #088A08 (color del borde del tooltip), solid (estilo del borde del tootltip), que también puede ser (y si tu quieres):

none - Objeto sin borde
hidden - Borde del objeto oculto
dotted - Borde punteado · · ·
dashed - Borde discontinuo - - -
solid - Borde continuo (este es el borde que utilizaremos)
double - Borde doble
groove - Borde con sombra oscura
ridge - Borde con sombra clara
inset - Borde 3D hacia afuera
outset - Borde 3D hacia adentro

• background-color: #74DF00;    ->color de relleno/fondo del tooltip.
• color: #0B0B0B;   ->color de la letra del tooltip.
• font-size: 8pt;   ->tamaño de la letra del tooltip.
• font-family: Comic Sans MS;   ->Fuente (puede ser Segoe UI,  Trebuchet MS, etc).
• text-align: left;   -> Alineación del texto del tooltip.

3. Tras personalizarlo a tu medida, GUARDAMOS CAMBIOS.
4. Ahora, cada vez que queramos usar los tooltips en un enlace deberemos emplear este código:

<a href="URL-DE-LA-PAGINA" class="tooltip">TITULO-DEL-ENLACE<span>CONTENIDO-TEXTO-DEL-TOOLTIP</span></a>

Y sustituye, URL-DE-LA-PAGINA, por la dirección de la página a la que quieres enlazar, como, por ejemplo," http://blogger.com".
TITULO-DEL-ENLACE, por el texto que aparecerá antes de poner el cursor, como, por ejemplo, "Blogger".
CONTENIDO-TEXTO-DEL-TOOLTIP, por el texto que saldrá al poner el cursor sobre el enlace, es decir, lo que saldrá dentro del Tooltip, como, por ejemplo, "en esta página creé mi blog".

¡Y ya podrás disfrutar de un bonito y decorado título para tus enlaces!