Hoy les mostramos un plugin (aunque no como tal ya que no está encapsulado) para mostrar tooltips en según que elementos para que muestren una información extra.
Con este plugin podremos personalizarlo y darle un aspecto acorde al de la web donde lo implementemos. Su uso es bastante sencillo y lo podeis ver a continuación:
Con este plugin podremos personalizarlo y darle un aspecto acorde al de la web donde lo implementemos. Su uso es bastante sencillo y lo podeis ver a continuación:
Código HTML
1 | <div class="tooltip"> |
2 | <h2>Bienvenid@ a casa</h2> |
3 | <p>Jack Bach te ha enseñado a hacer espectaculares tooltips con jQuery, totalmente customizables ¡Para que tus diseños sean exactamente como tu quieres!</p> |
4 | <p>Si te ha gustado el tutorial, puedes encontrar muchos más en el blog, <b>Tinnta.com</b>, y suscribirte al feed.</p> |
5 | </div><!-- fin tooltip --> |
6 | <div id="icono"></div> |
Código Javascript
01 | $(document).ready(function (){ |
02 | var ocupado = 0; |
03 | var pausa = null; |
04 |
05 | //Cuando se pasa por encima del icono |
06 | $('#icono').mouseover(function (){ |
07 | if(pausa) clearTimeout(pausa); |
08 | if (ocupado == 0){ |
09 | ocupado = 1; |
10 | $('.tooltip').css({ |
11 | //Aparece (ya que estaba en display none) |
12 | top: 0, |
13 | display: 'block', |
14 | opacity: 0 |
15 | }).animate({ |
16 | //Sube 20px y pasa a ser opaco |
17 | top: '-=' + '20px', |
18 | opacity: 1 |
19 | }, 'normal', |
20 | function (){ |
21 | ocupado = 0; |
22 | }); |
23 | } |
24 | }); |
25 | //Cuando sale de la zona del icono |
26 | $('#icono').mouseout(function (){ |
27 |
28 | pausa = setTimeout(function () { |
29 | pausa = null; |
30 | if (ocupado == 0){ |
31 | ocupado = 1; |
32 | $('.tooltip').css({ |
33 | opacity: 1 |
34 | }).animate({ |
35 | top: '-=' + '50px', |
36 | opacity: 0 |
37 | }, 'slow', |
38 | function(){ |
39 | $('.tooltip').css({ |
40 | display: 'none', |
41 | top: 0 |
42 | }); |
43 | ocupado = 0; |
44 | }); |
45 | }else { |
46 | $('.tooltip').css({ |
47 | display: 'none' |
48 | }); |
49 | ocupado = 0; |
50 | } |
51 | }, 500) |
52 | }); |
53 | }); |
CSS
01 | .tooltip { |
02 | background: transparent url('img/tooltip.png') no-repeat; |
03 | #background: transparent url('img/tooltip_ie.png') no-repeat; |
04 | _background: transparent url('img/tooltip_ie.png') no-repeat; |
05 | width: 290px; |
06 | height: 300px; |
07 | padding: 20px 60px; |
08 | position: absolute; |
09 | margin: 55px -70px; |
10 | z-index: 2; |
11 | display: none; |
12 | opacity: 0; |
13 | filter: alpha(opacity = 0); |
14 | -moz-opacity:0; |
15 | } |
No hay comentarios:
Publicar un comentario