SummArg | Cursos y recursos para webmasters

06/10/2010

Tips en tu web con Chilltips

Los tooltips son pequeñas etiquetas que se despliegan al pasar el puntero del mouse sobre un elemento web y que ofrece algún tipo de información referente al objeto. Facilita el entendimiento de un contenido de una forma simple y sin saturar la página.

Para esta ocación vamos a ver la solución que nos ofrece ChillTip, un plugin jQuery que añade la posibilidad de dar colores a los contenidos de nuestras etiquetas. Estas etiquetas pueden aplicarse sobre links, textos, imagenes, etc. Casi todos los elementos comunes a los que se les pueda colocar class=”ChillTip”. Interesante, no?

Instalación y uso

1- Descargamos los archivos necesarios de ChillTip – Download. El paquete viene con el archivo de jQuery, pero si fuera necesario descargar la última versión deberán hacerlo de jquery.com. Conviene guardar ambos archivos *.js dentro de un directorio llamado /js/

2- Insertamos la llamada a los scripts dentro de nuestro encabezado, entre etiquetas <head>

<head>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/chilltip-packed.js"></script>
</head>
3- Entre etiquetas <body> de nuestra página añadimos la clase ChillTip al elemento que deseamos etiquetar. El contenido de la etiqueta será lo que coloquemos en el title.
<a href="chilltip.html" class="ChillTip" title="Contenido de la etiqueta.">Link que activa la etiqueta.</a>
4-  Para añadir color deberemos colocar un  <span class=”one”> o la clase deseada en el title, pero como esta etiqueta estará dentro de una propiedad no será de facil lectura para el navegador, por lo que deberemos cambiar el mayor y el menor <> a código ascii. Entonces debemos cambiar < por &#60; , / por &#47; , por &#34; y > por &#62; . Resumiendo, nos quedaría algo así:
<a href="chilltip.html" class="ChillTip" title="Para aprender sobre &#60;span  class=&#34;one&#34;&#62;Chilltip&#60;&#47;span&#62 clickear aqui; .">Info.</a>

El paquete de descargas tiene un CSS sugerido y en el sitio oficial tienen algunos ejemplos listos para copiar y pegar con los colores preparados.

Dejar un comentario