Personaliza tu blog: ¡Editando el Tooltip!

Holaaaaaaa, hoy les traigo una pequeña guía de lo que son los tooltips y cómo editarlos un poco para personalizar más tu blog.

Primero que todo, ¿Qué es un tooltip?
Un tooltip es el texto que aparece al dejar el cursor sobre un link, es una descripción emergente, esto se puede añadir a cualquier código html con lo siguiente: title="aquí texto de tu tooltip"

¡Bueno! en plantillas actualizadas:

plantilla >> editar html

Para comenzar a editar nuestro tooltip primero debemos ir a

y buscar </head>

Debajo pegamos lo siguiente:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script><script>(function($){$(document).ready(function(){$("[title]").style_my_tooltips();});})(jQuery);</script>

a continuación te dejo unos bonitos diseños de tooltip para que uses en tu blog.

buscamos ]]></b:skin> y arriba pegamos el código de nuestra preferencia.

.tooltip{
display: inline;
position: relative;
}
#s-m-t-tooltip { margin:2px;
padding: 5px 9px;
border-radius: 2px;
border-right-width: 2px;
border-bottom-width: 1px;
display: none;
color: #f7c6c6;
background: #F1F1F1;
border: double 4px #D0E0E8;
box-shadow: inset 1px 1px 0px #F8F8F8;
font-family: PF Arma Five;
font-size: 8px;
no-repeat 5%;
text-align: left;
position: absolute;
z-index: 1000;
background-opacity: 0.;
text-transform: uppercase;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
margin-left:30px;
margin-top:-5px;
}

.tooltip{
display: inline;
position: relative;
}
#s-m-t-tooltip {font:8px Tahoma;
color: #000;
text-align: center;
text-transform:uppercase;
letter-spacing: 1px;
background: #eee;
display: none;
position: absolute;
z-index: 9999999;
padding: 2px 5px 2px 5px;
max-width: 150px;
margin: 10px;
border: 1px solid #9e8ea5;
border-radius:1px;
text-shadow: -1px 0 white, 0 1px white,1px 0 white, 0 -1px white;
margin-left:30px;
margin-top:-5px;
}

.tooltip{
display: inline;
position: relative;
}
#s-m-t-tooltip {min-width:70px;
max-width:300px;
background: #eee;
font-size: 10px;
line-height: 14px;
box-shadow:inset 0px 0px 1px 1px #c0c0c0;
font-family: Tahoma;
letter-spacing: 1px;
font-family: Georgia;
font-size: 9pt;
font-style: italic;
letter-spacing: 2px;
color: #ccc;
text-shadow: 1px 1px 0 #ffff;
text-align: center;
padding: 3px 4px 3px 6px;
display: block;
z-index: 100;
border:none;
position: absolute;
margin-left:30px;
margin-top:-5px;
}
#s-m-t-tooltip:before {
position: absolute;
display: block;
content: "";
border-color: transparent #c0c0c0 transparent transparent ;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom: 0px;
left:-20px;
}

.tooltip{
display: inline;
position: relative;
}
#s-m-t-tooltip {min-width:70px;
max-width:300px;
background: #facd8a;
font: normal bold 7px 'Geo',Trebuchet,Verdana,sans-serif;
line-height: 14px;
text-transform: uppercase;
text-shadow: 0px 1px 0px #f39d77, -1px 0px 0px #f39d77;
box-shadow: 3px 3px 0px #f39d77;
text-align: center;
color: #fff8f5;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
position:absolute;
text-align: center;
padding: 3px 4px 3px 6px;
display: block;
z-index: 100;
margin-left:30px;
margin-top:-5px;
}

si los códigos no funcionan debes probar cambiando #s-m-t-tooltip { por div#qTip {

¡El siguiente post de html será de volver el archivo del blog un pequeño calendario!
Es un código viejo que tenia guardado en una entrada así que estoy probándolo y editándolo para subirlo para ustedes.

¡Saludos!