Poshy Tip jQuery Plugin
Poshy Tip es un plugin jQuery gratuito para la creación de atractivos tooltips. Utilizarlo es de lo más simple, prácticamente no requiere modificar en nada nuestra estructura HTML ya que utiliza el atributo title, el mismo debería estar presente en cualquier sitio que tenga código valido según estándares.
Visualmente estos tooltip son muy atractivos, sin embargo, y en caso de no estar conformes con el diseño por defecto, podemos cambiarlo de forma muy simple por medio de hojas de estilo. En el sitio oficial pueden ver varias demostraciones de uso que utilizan distintos estilos.
Para implementar el tooltip que aparece en la imagen anterior tan solo tendremos que bajar el plugin y añadirlo a nuestro <head> junto con el estilo deseado y la librería jQuery.
<link rel="stylesheet" href="src/tip-yellow/tip-yellow.css" type="text/css" />
<script type="text/javascript" src="demo/includes/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="src/jquery.poshytip.js"></script>
<script type="text/javascript">
$(function(){
$('#demo-basic').poshytip();
});
</script>
Cuando descargues el plugin te darás cuenta que hay varios estilos que podrás ver en la documentación y ejemplos.
En nuestro <body> tan solo añadiremos:
<a id="demo-basic" title="Hey, there! This is a tooltip." href="#">Hover for a tooltip</a>
El plugin contempla distintos aspectos básicos, como por ejemplo la ubicación del tooltip, mediante parámetros podemos indicarle al plugin donde ubicar el tooltip en relación al enlace, podemos ubicarlo a cualquiera de los lados y en prácticamente cualquier ángulo.
Un detalle importante es que también podemos utilizar este plugin con campos del tipo input, excelente para formularios en donde debemos, o deseamos, ampliar la información para ayudar al visitante en la tarea de completar el formulario en cuestión.
También permite introducir imágenes y código HTML dentro del tooltip.
Autor
¿Buscas trabajo de programador?
Una respuesta a “Poshy Tip jQuery Plugin”
Deja una respuesta
11 artículos que te podrían interesar
Ver más sobre
It’s actually a nice and useful piece of information. I’m happy that you shared this useful info with us. Please stay us informed like this. Thank you for sharing.