Hola taringueros, hoy les traigo un plugin de
jQuery
llamado
tipsy
. Bueno,
tipsy
es una especie de
tooltip
como el de facebook, para los que no conoscan el plugin aquí una captura de facebook:(Lo que está en negro es el tooltip )
Bueno, primero tenemos que tener 3 cosas.
El plugin de
jQuery
(jquery-1.3.2.min.js) El plugin
tipsy
(jquery.tipsy.js) El CSS del plugin tipsy Ganas de hacerlo. 
Descargar todo lo dicho anteriormente.
Empezamos a crear nuestro
tooltip
. Creamos un nuevo archivo HTML lo llamamos index.html (o como queramos), ponemos nuestras etiquetas básicas (html, head, body). Dentro del head pondremos esto:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tipsy.js"></script>
<link rel="stylesheet" type="text/css" href="tipsy.css" />
*Nota*dijo:Cambiar la ruta ( src="" ) por donde tengamos nuestro archivos (jquery-1.3.2.min.js, jquery.tipsy.js y tipsy.css)
Importante!
*Nota 2*dijo:El archivo tipsy .css lo abrimos y cambiamos la ruta del background por donde tenemos nuestra imagen tipsy.gif
Ya hecho esto, pondremos esto después de la etiqueta body:
<script type='text/javascript'>
$(function() {
$('#button1').tipsy();
});
</script>
Y después de esto, pondremos un link con un id:
<a id="button1" class="button" title="Tolltip Norte">Norte</a>
Bueno, explicaré esto. En nuestro script, tenemos #button1, con esto hacemos que el plugin recaiga en nuestro elemento que tenga el id #button1. En nuestro link, tenemos una clase y un title, en el title pondremos lo que queremos que salga en nuestro
tooltip
, y en donde dice Norte pondremos lo que queremos que, al pasar nuestro mouse, aparezca nuestro tootltip.
También podemos cambiar de lado nuestro
tooltip
de la siguiente manera.
También podemos cambiar de lado nuestro
tooltip
de la siguiente manera.
{gravity: 'n'}
Agregamos esta linea de código dentro de nuestro paréntesis, de esta manera:
$('#button1').tipsy({gravity: 'n'});
Los valores que podemos asignar en lugar de n son: s (sur-arriba), e (este-isquierda), w (oeste-derecha) y n (norte-abajo).
Básicamente con esto, tenemos nuestro
tooltip
listo
DEMO
Espero les haya servido de algo, saludos!
Básicamente con esto, tenemos nuestro
tooltip
listo DEMO
Espero les haya servido de algo, saludos!