jQuery Gips Tooltips
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
Añadir estos tooltips a nuestra Web es muy sencillo. Tan solo tienes que añadir la librería jQuery y el script Gips más los estilos necesarios en el <head> de vuestra página:
<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>
En el caso del ejemplo estamos aplicando distintos efectos de tooltip a unos inputs que tendremos en nuestro <body>:
<div id="demo"> <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" /> </div>
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
¿Buscas trabajo de programador?
2 respuestas a “jQuery Gips Tooltips”
Deja una respuesta
60 artículos que te podrían interesar
Estimado,
me podrías enviar este archivo a mi correo por favor =)
Saludos y gracias.-
Los archivos los puedes descargar viendo el código fuente