Creando ToolTips chulos con TinyTip y jQuery

Un aspecto que muchas veces descuidamos en nuestras webs son los Tooltips. A día de hoy, con tanta paranoia por el diseño instalada en nuestras cabezas por las políticas apple, el tradicional Tooltip estilo Windows será percibido como “chapucero” por el usuario (o cliente) que demandará una imagen más “2.0” (el palabro de moda).

TinyTip es un plugin ligerito, fácil de usar e implementar, que le dará una estética muy chula a vuestros proyectos. Os lo podéis descargar desde este enlace, en el que tenéis el .css el .js y una carpeta con imágenes de prueba.

Lo primero que debéis hacer es incluir en vuestro proyecto los archivos css, jQuery y el javascript de Tinytips, tal que así:

rel="stylesheet" type="text/css" media="screen" href="styles/tinyTips.css" />
<script type="text/javascript">// <![CDATA[
type</span>="text/javascript" src="js/jquery-1.7.1.min.js">
// ]]></script>
<script type="text/javascript">// <![CDATA[
type</span>="text/javascript" src="js/jquery.tinyTips.js">
// ]]></script>

Recordad poner la ruta en la que hayáis guardado los archivos. Si queréis no necesitáis descargar jQuery, sino que podréis enlazarlo a la página de google. El siguiente paso es inicializar los Tooltips

<script type="text/javascript">// <![CDATA[
type</span>="text/javascript">
		$(document).ready(function() {
			$('a.tTip').tinyTips('title');
			$('a.imgTip').tinyTips('<img <span="" class="hiddenSpellError" pre="img ">src="imagenes/demo-image.jpg" />
Puedes usar imágenes en tus Tooltips.', 'yellow');
			$('img.tTip').tinyTips('title', 'green');
		});
      </script>

Bueno, puedes ver tres inicializaciones: La primera implica que los enlaces de la clase tTip mostrarán como texto el que metáis en el parámetro title. El segundo es lo mismo, con la clase imgTip, pero mostrará una imagen y, debajo de ella, el texto, y además recibe el parámetro ‘yellow’, que define el color de fondo. La tercera es un tooltip para una imagen, de nuevo con el texto definido en title y fondo verde (los colores que podéis usar los veréis al descargar la carpeta images). En el siguiente ejemplo podéis ver la implementación dentro de un html:


<div id="<span class=" hiddenspellerror"="" pre="id ">demo"></div>

    
<img <span="" class="hiddenSpellError" pre="img ">class="tTip" src="imagenes/demo-image.jpg" title="Hola, soy una imagen de muestra!" />Lorem ipsum dolor sit amet. <a class="imgTip" href="#">Enlace con un tooltip con la misma imagen que la de al lado</a> In ligula mauris, aliquam quis tempor quis, consectetur a erat. Nulla non justo pellentesque dui elementum pharetra nec eu magna. <a class="tTip" href="#" title="Y en este último ejemplo podéis ver que puedo poner un texto todo lo largo que quiera, aunque lo normal es una explicacioncilla corta, no un parrafazo tan largo">Último ejemplo</a>

    </p>
</div>

En fin, con estas simples instrucciones veis que podéis tener vuestros Tooltips personalizados y bien chulos sin romperos la cabeza

// ]]>

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s