SummArg | Cursos y recursos para webmasters

06/04/2012

Tooltips simples, rápidos y elegantes con jQuery gips

Gips es un plugin para jQuery que nos permite introducir tooltips minimalistas muy fáciles de personalizar en cualquier proyecto web. Ofrece la posibilidad de crear themes CSS y soporta los siguientes parámetros:

  • text: Texto del tooltip.
  • delay: Tiempo de espera hasta la aparición del tooltip
  • autoHide: Si se lo coloca en true, el tooltip desaparecerá automáticamente
  • pause: Tiempo de espera para ocultarse
  • animationSpeed: Velocidad de la animación
  • placement: Ubicación del tooltip en relación al elemento que lo dispara (top, bottom, right, left)
  • theme: CSS theme para el tooltip, los predefinidos son purple, green, yellow y red
  • imagePath: Ruta a la imagen para cerrar la caja

Para implementarlo en cualquier proyecto primero descargamos el plugin, con sus correspondientes archivos .js y .css, además de jQuery y los vinculamos al proyecto.

<link href="css/gips.css" rel="stylesheet" type="text/css" />
 <script src="js/jquery.min.js" type="text/javascript"></script>
 <script src="js/gips.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 $('input#purple').gips({ 'theme': 'purple', autoHide: true, text: 'This is purple tooltip, auto hide after pausess time elapses.' });
 $('input#green').gips({ 'theme': 'green', placement: 'left' });
 $('input#yellow').gips({ 'theme': 'yellow', autoHide: true, placement: 'right' });
 $('input#red').gips({ 'theme': 'red', placement: 'bottom' });
 });
 </script>

Y en el cuerpo del mismo insertamos nuestros inputs de texto.

<input type="text" value="Purple Tooltip Here." id="purple" />
<input type="text" value="Green Tooltip Here." id="green" />
<input type="text" value="Yellow Tooltip Here." id="yellow" />
<input type="text" value="Red Tooltip Here." id="red" />

Descargar | Demo

Dejar un comentario