Plugin jQuery para hacer un Tip simple

  • Por
Ejemplo de pluging en jQuery que nos permitirá implementar una funcionalidad de tip sobre elementos de la página.
Llegado a este punto del Manual de jQuery tenemos la base suficiente para trabajar con ejemplos interesantes y prácticos. Además. para dominar el esquema de trabajo típico con este framework Javascript, seguramente nos venga bien seguir practicando en la realización de ejemplos que pongan en práctica todo lo visto hasta el momento.

En artículos anteriores ya explicamos los plugins en jQuery y en este artículo continuaremos trabajando con ellos, pues son la manera más adecuada de hacer componentes para páginas web, con un código limpio y ordenado, con la ventaja que los podremos reutilizar en diversos proyectos, nuestros o incluso de otros desarrolladores.

En esta ocasión vamos a realizar un ejemplo de tip sencillo con jQuery, osea, un sistema para crear elementos "calientes" que, al pasar el ratón sobre ellos, muestren un mensaje con una explicación contextual, lo que habitualmente se conoce como "tip". Lo cierto es que anteriormente en este manual ya explicamos una manera de hacer un tip simple, cuando vimos los eventos de ratón mouseenter y mouseleave, con lo que la práctica actual se basará en el artículo visto anteriormente.

Sin embargo, el modo en el que vamos a desarrollar el tip tiene una una diferencia fundamental, con respecto a las explicaciones anteriores y es que antes no se utilizaban los plugins porque no los habíamos explicado todavía. Con ello, el ejemplo que veremos ahora implementado por medio de un plugin, será mucho más interesante porque ahorraremos código y podremos portarlo a otras webs sin mayor dificultad.

El ejemplo que vamos a ver a continuación, para hacernos una idea de los objetivos, lo hemos publicado en una página aparte.

Esquema de funcionamiento del plugin de tip

Para poder seguir este ejemplo con mayor facilidad, vamos a explicar los pasos que debe realizar este plugin específicamente, sin repetir lo que ya se comentó en el artículo de Reglas para hacer plugins en jQuery.
  • Para llamar al plugin, recordemos, invocamos un método con el nombre del plugin, sobre elementos de la página web que tenemos en un objeto jQuery. Ese objeto jQuery puede tener uno o varios elementos de la página que hemos obtenido con un selector. El método del plugin que ejecutamos sobre el objeto jQuery, recibirá un texto como parámetro, que será lo que aparezca en la capa del tip.
  • El plugin se encargará como primer paso de generar la capa del tip e insertarla en el código del documento. En el momento de insertarla no se verá todavía, porque las capas del tip tendrán el estilo CSS display:none.
  • Definiremos un evento mouseenter sobre el elemento "caliente", es decir sobre aquellos elementos sobre los que invocamos el plugin. Ese mouseenter se encargará de mostrar la capa del tip y colocarla en un lugar próximo a donde se encuentra la puntera del ratón.
  • Definiremos un evento mouseleave, también sobre los elementos "calientes", que se encargará de ocultar la capa del tip.
Eso es todo. Así que veamos el código del Plugin.

jQuery.fn.creaTip = function(textoTip) {
   this.each(function(){
      elem = $(this);
      var miTip = $('<div class="tip">' + textoTip + '</div>');
      $(document.body).append(miTip);
      elem.data("capatip", miTip);
      
      elem.mouseenter(function(e){
         var miTip = $(this).data("capatip");
         miTip.css("left", e.pageX + 10);
         miTip.css("top", e.pageY + 5);
         miTip.show(500);
      });
      elem.mouseleave(function(e){
         var miTip = $(this).data("capatip");
         miTip.hide(500);
      });
   });
   
   return this;
};

Lo importante ahora en este código es fijarse en la manera de crear el plugin. Como vemos, estamos asignando una función a la propiedad jQuery.fn.creaTip. Con ello realmente estamos extendiendo las funcionalidades del framework Javascript para que a partir de ahora los objetos jQuery dispongan de un método nuevo llamado "creaTip", que recibe un parámetro que es el texto que tiene que aparecer en el tip.

Como en todos los plugins jQuery, tenemos que hacer un recorrido a los elementos que pueda haber en el objeto jQuery que reciba este método nuevo. Esto se hace con this.each() y en ese recorrido tenemos que hacer todas las acciones necesarias para dotar de la funcionalidad nueva a esos elementos.

Ahora veamos las siguientes líneas de código.

elem = $(this);

Con esa línea creamos una variable elem a la que asignamos el valor $(this), es decir, el objeto jQuery con el que estamos trabajando.

var miTip = $('<div class="tip">' + textoTip + '</div>');

Con esta línea generamos sobre la marcha un elemento nuevo, que es una capa con la class CSS "tip" que guardamos en la variable miTip. Como texto en el div colocamos el contenido de la variable "textoTip". Este nuevo elemento se ha creado simplemente, pero aun no lo hemos metido en la página. En este momento simplemente se creó una variable miTip con el elemento en memoria.

$(document.body).append(miTip);

Con esta línea metemos en el cuerpo de la página el elemento DIV generado previamente. El elemento se colocará en el código de la página al final del todo, antes de cerrar el BODY. Aunque se haya insertado un elemento en la página, no se verá todavía, puesto que la capa insertada tiene la clase CSS "tip" y luego veremos que a esta clase le hemos metido un display:none para que no aparezca hasta que se pase el ratón por encima del elemento con tip.

elem.data("capatip", miTip);

Con esta línea hacemos una cosa interesante. Con elem.data() estamos guardando un dato en el elemento "caliente". El dato tiene el nombre "capatip" y el valor es miTip (la capa del tip). Con este paso estamos almacenando la capa del tip en el elemento que lo tiene que mostrar, así tendremos cada tip asociado a su propio elemento.

Luego en el código se definen dos eventos sobre el elemento "caliente", para mostar y ocultar el tip cuando el puntero del ratón entre y salga de él. Esas funciones para procesar los eventos son como las que pudimos conocer en el artículo en el que vimos el tip simple sin definir el plugin. Pero hay un detalle que merece la pena comentar. Veamos el código del evento mouseenter

elem.mouseenter(function(e){
   var miTip = $(this).data("capatip");
   miTip.css("left", e.pageX + 10);
   miTip.css("top", e.pageY + 5);
   miTip.show(500);
});

Como se puede ver, lo primero que se hace es:

var miTip = $(this).data("capatip");

Con esto estamos accediendo al dato "capatip" que habíamos guardado en el elemento que tiene el tip. En ese dato, como habíamos comentado, contiene la capa del tip que debemos mostrar. Luego, simplemente hacemos las acciones necesarias para situar esa capa del tip en un lugar próximo al puntero del ratón y mostrarla en la página con el método show().

Después del recorrido con each() y antes de acabar la función del plugin, tenemos que devolver el propio objeto jQuery que recibió el método, con return this.

Una vez definido el plugin, para generar los tips tenemos que invocarlo sobre los elementos de la página que deseemos que muestren un tip. Recordar de hacer este paso sólo cuando la página esté lista para recibir acciones:

$(document).ready(function(){
   $("#elemento1").creaTip("todo bien...");
   $("#elemento2").creaTip("Otra prueba...");
})

Código completo de la página del tip jQuery

Quizás venga bien ver el código completo de este ejemplo de creación de plugins en jQuery, donde podremos ver todo el proceso completo de implementación y puesta en marcha del tip.

<html>
<head>
<title>Trabajando con plugins en jQuery - Tip simple</title>
<style type="text/css">
.tip{
background-color: #ffcc99;
padding: 10px;
display: none;
position: absolute;
    width: 200px;
}
</style>
<script src="../jquery-1.4.1.min.js"></script>
<script>

jQuery.fn.creaTip = function(textoTip) {
   this.each(function(){
      elem = $(this);
      var miTip = $('<div class="tip">' + textoTip + '</div>');
      $(document.body).append(miTip);
      elem.data("capatip", miTip);
      
      elem.mouseenter(function(e){
         var miTip = $(this).data("capatip");
         miTip.css("left", e.pageX + 10);
       miTip.css("top", e.pageY + 5);
         miTip.show(500);
      });
      elem.mouseleave(function(e){
         var miTip = $(this).data("capatip");
         miTip.hide(500);
      });
   });
   
   return this;
};


$(document).ready(function(){
$("#elemento1").creaTip("todo bien...");
$("#elemento2").creaTip("Otra prueba...");
})
</script>

</head>
<body>
<h1>Trabajando con plugins en jQuery - tip simple</h1>

<div id="elemento1" style="background-color: #ccccff; padding: 5px;">Pasa el ratón por encima de esta capa...</div>
<p>
Este texto es para poner <a id="elemento2" href="#">este enlace que también tiene tip</a>.
</p>

</body>
</html>

El ejemplo se puede ver en marcha en una página aparte.

Referencia: Puedes aprendiendo a partir de este ejemplo nuevas utilidades de los plugins de jQuery como las opciones de configuración. Con ello consegurás un plugin para hacer tips en jQuery más dinámico y sobre todo más configurable. Si te interesa, explora el artículo Plugin Tip con opciones en jQuery.

Esperamos que con este ejemplo y los explicados anteriormente en este manual de desarrollo web .com se haya comprendido la manera de hacer plugins en jQuery. Ahora sería interesante que cada uno pueda practicar por su parte lo aprendido, para realizar algún otro plugin simple que os ayude a afianzar los conocimientos.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Jorge

31/3/2010
Una duda sobre el TIP
se ve muy bien,

si bien, hay una cosa que a mi me trae de cabeza y q aun no he conseguido arreglar y es el hecho de:

pasar el raton rapidamente por la zona del TIP, en ese caso, cuando el raton se queda quieto, las animaciones de las veces que ha pasado el raton por el tip se siguen realizando una tras otra hasta que se para, con lo cual el TIP aparece y desaparece muchas veces seguidas y te vuelves loco, lo cual en mi opinion queda feo.

saben si hay alguna manera de que no se produzca esa repeticion de las animaciones???

esto solo sucede para usuarios enredas, en un uso "normal" no pasa, pero me gustaria saber arreglarlo ya que la solucion sera aplicable a otros usos de JQuery como abrir ventanas con un efecto fade al pulsar un boton, si lo pulsas 5 veces rapido, la animacion se ejecuta 5 veces y no te deja usar la aplicacion hasta que la animacion finalice.... se puede desactivar el boton, pero si no cabe la posibilidad como en el caso del tip de desactivar nada, lo suyo seria poder cortar esas animaciones...

no se si me he explicado bien, espero qeu si.

gracias por el articulo y por la pagina que me lleva ayudando en proyectos desde hace más de 4 años.. jeje

saludos!!!!

beni0888

07/5/2010
Un único div para el tip
Hola a todos!
me surge una duda, ¿no sería posible realizar este mismo ejemplo pero creando un único div para el tip? Me explico, no podríamos, por ejemplo, crear un div 'on the fly' justo antes de empezar a recorrer cada uno de los objetos jquery que recibe el plugin y después en el evento mouseenter de cada uno de los objetos cambiar el contenido del div?
Por otro lado, lo que comenta Jorge me parece muy interesante, a mí también me ha surgido esa inquietud en algún desarrollo que he hecho y aún no he sido capaz de resolverla, estaría genial que alguién propusiera una solución.
Un saludo