29
Jun 08

Tooltips con Mootools

Guardado bajo la categoría: JavaScript, Mootools

Más de un visitante de este weblog me pregunto como fue que hice para modificar los clásicos tooltips que se muestran al situarnos sobre alguno de los enlaces, y como no tengo ningún secreto voy a develar el misterio. A decir verdad no es nada del otro mundo, existe decenas de scripts realizados con JavaScript que proporcionan este efecto, entre ellos esta: Prototip 2, jTip o QTip. Aunque lo que hice yo fue utilizar la librería Mootools y usar la función toolTip que trae por defecto.

Lo primero es incluir la librería mootools a nuestro sitio como de la siguiente manera, agregando dentro de la etiqueta <head> el código que les voy a mostrar a continuación:

  1. <script type="text/javascript" src="mootools.js"></script>

Luego el siguiente código va a reemplazar los tooltips comunes por nuestros propios tooltips:

  1. window.addEvent('domready', function(){
  2.   var tips = new Tips($$('a'), {
  3.    initialize:function(){
  4.    this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
  5.   },
  6.   onShow: function(toolTip) {
  7.    this.fx.start(1);
  8.    },
  9.    onHide: function(toolTip) {
  10.     this.fx.start(0);
  11.    }
  12.   });
  13.  });

El lector que se anime, puede jugar con esta línea,

  1. this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);

y modificar la duración y el efecto con el que nuestro globo de ayuda entre en acción.

Y luego agregamos los siguientes estilos a nuestra hoja de estilo:

  1. .tool-tip {
  2.  color: #fff;
  3.  width: 139px;
  4.  z-index: 13000;
  5. }
  6.  
  7. .tool-title {
  8.  font-weight: bold;
  9.  font-size: 11px;
  10.  margin: 0;
  11.  color: #9FD4FF;
  12.  padding: 8px 8px 4px;
  13.  background: url('img/bubble.png') top left;
  14. }
  15.  
  16. .tool-text {
  17.  font-size: 11px;
  18.  padding: 4px 8px 8px;
  19.  background: url('img/bubble.png') bottom right;
  20. }
  21.  
  22. .custom-tip {
  23.  color: #000;
  24.  width: 130px;
  25.  z-index: 13000;
  26. }
  27.  
  28. .custom-title {
  29.  font-weight: bold;
  30.  font-size: 11px;
  31.  margin: 0;
  32.  color: #3E4F14;
  33.  padding: 8px 8px 4px;
  34.  background: #C3DF7D;
  35.  border-bottom: 1px solid #B5CF74;
  36. }
  37.  
  38. .custom-text {
  39.  font-size: 11px;
  40.  padding: 4px 8px 8px;
  41.  background: #CFDFA7;
  42. }

Jugando con el código CSS podremos darle es aspecto que nosotros queramos, esto queda a gusto y placer de cáda uno, la única condición es respetar los nombres de las clases.

Pueden ver el efecto en funcionamiento en este mismo blog, haciendo situándose en cualquiera de los enlaces. También dejo un archivo .ZIP que incluye un ejemplo: tooltips-con-mootools.zip.

Tags: , , , , 1