Tooltips: a colocarlos & editarlos!

"blog utilizado para el preview oh-tokki.bs.com"

¿Que son los Tooltips?

Los Tooltips, son descripciones emergentes, que nos dan una idea del elemento en el que posicionamos nuestro cursor.
Es muy común encontrar los Tooltips en links o imagenes con el atributo "title=", con el cual agregamos pequeñas descripciones a donde queremos que dirija dichos elementos, pero podemos ver estos mismos en diferentes sitios.

¿Como colocar estas descripciones?

Es muy común que utilicemos estas descripciones en ciertos links, por ejemplo yo los utilizo en los links del menú, agregándole una pequeña información de lo que hay ademas de lo que indica ya e link mismo.
Pero los tooltips los puedes colocar en diversos lugares, por ejemplo en imagenes o algún recuadro de búsqueda o simplemente en un texto sencillo o titulo.
Como bien explique anteriormente, la forma de agregar el tooltip mas común, es con el atributo que bien conocemos como:

title="descripción emergente"

& simplemente se colocaría de esta forma:

<a href="URL" title="descripcion emergente"> LINK </a>

Simplemente colocamos el title, dentro de lo que seria el codigo normal para un link, de la misma manera si se tratara de una imagen:

<img src="URL IMAGEN" title="descripcion emergente"/>

Hasta aquí ya sabemos que son & como colocar los Tooltips en nuestro blog.
Ahora bien, como editarlos ¿?

¿Como editar los Tooltips?

Esta parte es las mas sencilla de seguir & para mi la mas divertida, ya que es el momento de colocar colores &/o efectos llamativos.
Para editar nuestras pequeñas descripciones, nos dirigimos a Plantilla / Edición HTML / & buscamos {CTRL + F} la etiqueta:

</body>

ARRIBA de ella, colocamos el siguiente codigo script:

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

Una vez tenemos esto agregamos, volvemos a buscar en nuestra plantilla la siguiente linea:

]]></b:skin>

ARRIBA colocaremos el codigo CSS, donde podremos editar a nuestro gusto los tooltips de nuestro blog:

#s-m-t-tooltip {
background: #444; /* COLOR DE FONDO */
color: #eee; /* COLOR DE TEXTO */
font-family: calibri; /* TIPO DE LETRA */
font-size: 9px; /* TAMAÑO DEL TEXTO */
letter-spacing: 1px; /* ESPACIO ENTRE LETRAS */
border: 0px solid #fff; /* BORDE DEL TOOLTIP */
border-radius: 0px; /* ESQUINAS REDONDEADAS */
text-transform: uppercase;
line-height: 11px;
text-align: center;
display: block;
padding: 10px 15px 10px 15px;
margin: 20px 10px 0px 10px;
z-index: 999;
}

Editamos lo marcado.
Una vez tenemos todo organizado a nuestro gusto, guardamos & comprobamos si en todo nuestro blog funciona correctamente los efecto.
Pueden agregarle a algún link un "title" para comprobar o se dirigen a los links al final de las entradas (entradas antiguas, recientes & home) donde también podrán comprobar.

¿Como puedo colocarle efectos de movimiento?

Al colocarle un "efecto de movimiento" simplemente le estamos agregando animación a nuestro tooltip; puedes agregarle animación de la que mas te agrade, en movimiento, efectos como colores, bordes, tamaño, etc!.

Puedes crear tu propia animación guiándote con el tutorial que publique hace un tiempo para explicar la animación de los comentarios: Como colocar efectos con animacion ¿?
Si no tienes ganas de crear algún efecto, les puedo ofrecer 5 efectos de movimiento para que sus tooltips sean mas llamativas &/o originales!
Para colocarlo, simplemente en vez de colocar el CSS que te indique anteriormente, coloca el css del efecto que elijas a continuación:

• Efecto zoom continuo: Preview + codigo CSS!
• Efecto rebote: Preview + codigo CSS!
• Efecto giro vertical: Preview + codigo CSS!
• Efecto giro horizontal doble: Preview + codigo CSS!
• Efecto ida & vuelta: Preview + codigo CSS!

Recuerda de editar los colores a tu gusto en el CSS que elijas!
Listo! Es todo, ahora a decorar tus TOOLTIPS, dándole un toque distinto a tu blog.

abrazos mágicos!

(´ω｀★)ノ

~