Con todas las explicaciones vistas hasta ahora sobre Mootools estamos en condiciones de hacer ejemplos sencillos, pero con buenas funcionalidades, que hacen uso del framework Javascript, para realizar efectos e interfaces dinámicas sobre páginas web. En este caso vamos a explicar el proceso de construcción de un sistema para la presentación de tips dinámicos, que hemos simplificado bastante para que sea más fácil de entender.

Así que, si has seguido el Manual de Mootools que estamos publicando en DesarrolloWeb.com, debes poder entender el mecanismo que vamos a explicar en este artículo, que nos sirve como práctica de todo lo visto hasta ahora y de ayuda para afianzar nuestros conocimientos y conocer mejor las posibilidades de Mootools.

Qué son los Tip

Tip es una de esas palabras inglesas que ya tenemos incorporadas a nuestro lenguaje. Simplemente son unas pequeñas ayudas contextuales, que suelen aparecer en los programas o páginas web para aclarar conceptos o funcionalidades de las aplicaciones. Suelen ser por medio de una información emergente que sale al situarse sobre un elemento.

Pues eso es lo que vamos a hacer en este artículo, un sistema en Mootools para que podamos asignar fácilmente tips a los elementos de la página que nosotros queramos. El sistema lo haremos por medio de clases, de programación orientada a objetos, para que se pueda utilizar en cualquier elemento de la página con tan solo instanciar un objeto.

Podemos ver el ejemplo que vamos a realizar en este artículo en una página aparte, lo que nos podrá dar una idea exacta de lo que es un tip y nuestros objetivos en esta práctica.

La clase Tip

Como decíamos, vamos a crear una clase de programación orientada a objetos que mantenga la infraestructura necesaria para la realización de tips de una manera sencilla. Esta clase debe prepararse para que realice todas las labores de creación del tip y su visualización en el momento en que el usuario sitúe el ratón sobre los elementos de la página a los que pongamos los tip.

La clase es la siguiente. (La hemos comentado para que se pueda entender fácilmente)

var Tip = new Class({
   //propiedad
   tip: null,
   
   //constructor
   initialize: function(enlace, texto){
      //el enlace donde se debe mostrar el tip
      this.enlace = $(enlace);
      //el texto que habrá dentro del tip
      this.texto = texto;
      //definimos un evento cuando el ratón pasa sobre el enlace
      this.enlace.addEvent('mouseover', function(evento){
         //la función que va a ejecutarse con el evento recibe un parámetro evento que es un objeto event de mootools
         //hago una comprobación para saber si el tip no existe como objeto
         if (!$defined(this.tip)){
            //si el tip no estaba definido
            //creo un elemento DIV donde voy a meter el tip
            this.tip = new Element("div", {"class": "clasetip"});
            //aplico varias características al elemento HTML
            this.tip.set({
               //el texto del elemento
               "html": this.texto,
               //modifico varios estilos css
               //utilizo las propiedades evento.client.y y evento.client.x para saber la posición del ratón y mostrar el tip sobre esa posición.
               "style": "top:" + (evento.client.y + 10) + "px; left:" + evento.client.x + "px;"
            });
            //inyecto el tip en la página
            this.tip.inject(this.enlace, "after");
         }
      }.bind(this));
      //definimos un evento cuando el ratón sale del enlace
      this.enlace.addEvent('mouseout', function(evento){
         //compruebo que el tip estaba definido
         if ($defined(this.tip)){
            //si el tip estaba definido, lo voy a quitar de la página
            this.tip.destroy();
            //además coloco null en la variable tip para dejarlo no definido
            this.tip = null
         }
      }.bind(this));
   }
});

Es un pequeño pedazo de código fácil de seguir por medio de los comentarios, aunque a veces Mootools resulta un poco críptico, sobretodo para las personas que no tienen mucha experiencia.

Los elementos que tienes que identificar son los siguientes:

La propiedad "tip", que contendrá el objeto Element con la capa que se tiene que mostrar cuando se debe visualizar el tip.

El constructor (función initialize), que recibe el identificador del elemento al que queremos colocarle un tip y el texto del tip.

La creación del evento 'mouseover', sobre el elemento al que se debe colocar el tip, que sirve para definir acciones cuando el usuario pone el ratón sobre el elemento. Si te fijas, 'mouseover', se define por medio de una función. Esa función opcionalmente puede recibir algunos parámetros. Uno es el evento que se está recibiendo, que tiene una serie de datos útiles que vamos a utilizar más tarde en la función del evento, en concreto para situar el tip cerca de la posición actual del ratón. Así que con evento.client.y tengo la coordenada y de la situación del ratón cuando se produjo el evento, y con evento.client.x tengo la coordenada x de la posición del mismo.

Dentro del evento utilizo la función del core de Mootools $defined sobre this.tip, para saber si se ha mostrado el tip en un momento dado en la página o si no. Porque si estuviera viéndose el tip no tendría que volverlo a mostrar, o si se hubiera ocultado, no tendría que intentar volver a ocultarlo. Además, en el código nos hemos preocupado que this.tip sea null cuando el tip no está visualizándose.

Un detalle: al crear la capa del tip se le asigna una etiqueta div y una clase CSS llamada "clasetip", por medio de este código:

this.tip = new Element("div", {"class": "clasetip"});

Esto quiere decir que en algún lugar de la página debemos definir una declaración de estilos para esa clase CSS, que podría ser como esto:

div.clasetip{
   padding: 5px;
   background-color: #ededed;
   border: 1px solid #cccccc;
   position: absolute;
   font-size: 9pt;
}

Localiza en el código de la clase también el evento 'mouseout' que se ejecuta cuando el usuario retira el ratón sobre un elemento. En ese caso tenemos que destruir el tip y poner la variable this.tip a null, preparada para volver a mostrarse si se produce más adelante un nuevo evento 'mouseover'.

Configurar tips en elementos diversos de la página

Para utilizar esta clase tan solo necesitamos crear elementos con HTML, los que deseemos que tengan un tip asociado. Por ejemplo:

<a id="enlacecontip" href="https://desarrolloweb.com">Enlace</a>

<div id="estotambientienetip">Esta capa también tiene tip</div>

Luego tendremos que instanciar los tip asociados a estos elementos, con un código como el siguiente:

window.addEvent("domready", function(){
   var enlaceTip = new Tip("enlacecontip", "Este es el texto del tip...");
   var otroTip = new Tip("estotambientienetip", "Otro tip en marcha....");
});

Y con todo esto ya tenemos tips funcionando en cualquier elemento de la página donde los necesitemos.

Todo el código de este ejemplo de tips simples en Mootools

Aquí dejamos el código completo de esta práctica: <html>
<head>
   <title>tip en Mootools</title>
<style type="text/css">
div.clasetip{
   padding: 5px;
   background-color: #ededed;
   border: 1px solid #cccccc;
   position: absolute;
   font-size: 9pt;
}
</style>
<script src="mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script>
var Tip = new Class({
   //propiedad
   tip: null,
   
   //constructor
   initialize: function(enlace, texto){
      //el enlace donde se debe mostrar el tip
      this.enlace = $(enlace);
      //el texto que habrá dentro del tip
      this.texto = texto;
      //definimos un evento cuando el ratón pasa sobre el enlace
      this.enlace.addEvent('mouseover', function(evento){
         //la función que va a ejecutarse con el evento recibe un parámetro evento que es un objeto event de mootools
         //hago una comprobación para saber si el tip no existe como objeto
         if (!$defined(this.tip)){
            //si el tip no estaba definido
            //creo un elemento DIV donde voy a meter el tip
            this.tip = new Element("div", {"class": "clasetip"});
            //aplico varias características al elemento HTML
            this.tip.set({
               //el texto del elemento
               "html": this.texto,
               //modifico varios estilos css
               //utilizo las propiedades evento.client.y y evento.client.x para saber la posición del ratón y mostrar el tip sobre esa posición.
               "style": "top:" + (evento.client.y + 10) + "px; left:" + evento.client.x + "px;"
            });
            //inyecto el tip en la página
            this.tip.inject(this.enlace, "after");
         }
      }.bind(this));
      //definimos un evento cuando el ratón sale del enlace
      this.enlace.addEvent('mouseout', function(evento){
         //compruebo que el tip estaba definido
         if ($defined(this.tip)){
            //si el tip estaba definido, lo voy a quitar de la página
            this.tip.destroy();
            //además coloco null en la variable tip para dejarlo no definido
            this.tip = null
         }
      }.bind(this));
   }
});
</script>
</head>

<body>

<a id="enlacecontip" href="https://desarrolloweb.com">Enlace</a>

<script>
window.addEvent("domready", function(){
   var enlaceTip = new Tip("enlacecontip", "Este es el texto del tip... pulsa el enlace para ir a DesarrolloWeb.com");
});
</script>

<br>
<br>
<br>

<div id="estotambientienetip">Esta capa también tiene tip</div>

<script>
window.addEvent("domready", function(){
   var otroTip = new Tip("estotambientienetip", "Por ver un poco las posibilidades del sistema, hemos creado otro elemento que tendrá tip");
});
</script>


</body>
</html>

Y también un enlace para ver ver el ejemplo en marcha.

Tips mejorados con un plugin Mootools

Un último detalle. Se trata que este sistema de tip lo he creado de manera que sea sencillo para explicar y entender, pero la verdad es que se podría mejorar bastante el sistema para que fuera realmente potente. En este sentido queremos recomendar el estudio de un plugin que viene instalado con Mootools, que sirve para hacer tips de una manera mucho más versátil y detallista.

Por ahora dejamos el enlace a la documentación de los tips de Mootools, aunque más adelante sin duda nos pararemos a estudiar la implementación de estos tips avanzados.