Colortip – jQuery Tooltip Plugin

Name: Colortip – jQuery Tooltip Plugin
Brand: Jose Aguilar
SKU: joseaguilarblog-3487
Availability: InStock
Rating: 5 (1 reviews)

Colortip es un plugin jQuery tooltip simple en el cual se convierten los atributos de título de elementos tales como los links o imágenes de su página, dándole un estilo mucho más visible con distintos colores.

Hay 6 temas de colores disponibles, por lo que fácilmente se puede combinar con el resto del diseño.

Por ejemplo si queremos obtener como resultado tooltips como el siguiente:

Tendremos que crear nuestros links añadiéndole un class que identificará el color y añadiéndole el atributo title.

<a href="#" title="Texto a mostrar en el tooltip" class="black">link</a>

En el <head> de tu página necesitarás añadir los estilos del plugin:

<link rel="stylesheet" type="text/css" href="colortip-1.0/colortip-1.0-jquery.css"/>

Y finalmente, antes de la etiqueta de cierre </body> añadir los scripts:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="colortip-1.0/colortip-1.0-jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    /* Adding a colortip to any tag with a title attribute: */
    $('[title]').colorTip({color:'yellow'});
});
</script>

Descargar plugin

Ver ejemplos en funcionamiento