Crea un mejor tooltip con jQuery Awesomeness

Los navegadores mostrarán automáticamente una información sobre herramientas cuando proporcione un atributo de título. Internet Explorer también usará el atributo alt. Pero, en este tutorial, te mostraré cómo escribir rápidamente un complemento jQuery que reemplazará el tooltip típico del navegador con algo un poco más llamativo.

Una de las mejores herramientas que tenemos en nuestra bolsa de regalos de desarrollo web son las sugerencias sobre herramientas. Un tooltip es una caja que aparece cuando pasas el cursor sobre un elemento como un hipervínculo. Proporciona información suplementaria sobre ese elemento. Por ejemplo, un enlace con poco o ningún texto (un ícono) puede volverse confuso. Proporcionea una o dos oraciones adicionales dentro de un tooltip para explicar a tus usuarios lo que sucederá si hacen clic en ella.

Antes de que empieces

Este tutorial probablemente encajaría en la categoría de Intermedio. Las instrucciones asumen que tienes al menos una comprensión básica de HTML / CSS, técnicas de corte y jQuery.

Si necesitas una actualización de jQuery, aquí hay algunos sitios recomendados:

• jQuery para principiantes absolutos: serie de videos
• Crear un complemento de WordPress personalizado desde cero
• 15 recursos para comenzar con jQuery desde cero
• Codificación jQuery y JavaScript: ejemplos y mejores prácticas
• Comenzando con jQuery
• Cómo obtener lo que quieras - parte 1

Para que tengas una idea clara de los archivos involucrados en este tutorial, asi es como se debe ver la estructura de archivos  para cuando hayas terminado.

Aquí hay un resumen de lo que es cada archivo/carpeta:

• La carpeta de imágenes contiene las siguientes imágenes:
• - - tipTip.png - creado en el Paso 2
• - - tipMid.png - creado en el Paso 2
• - - tipBtm.png - creado en el Paso 2
• index.html - - creado en el Paso 3
• style.css - creado en el paso 3
• jquery-1.3.1.min.js - descarga esto aquí
• jquery.betterTooltip.js - - creado en el Paso 5

Paso 1 - Primero, sé un poco creativo

Abre Photoshop, o el software que prefieras, y crea una información sobre herramientas increíble. En lugar de diseñar sobre un fondo blanco liso, puede ser útil elaborar tu tooltip en un fondo similar al de tu sitio. De esa manera se integrará perfectamente. En su mayor parte, no hay manera correcta o incorrecta para completar este paso. Solo usa tu imaginación y creatividad.

Paso 2: corta en cubitos tu tooltip

Para este diseño en particular, deberás dividir el tooltip en 3 imágenes diferentes. Este diseño particular necesitará un PNG para preservar la transparencia. 1) La pieza superior. 2) Una rebanada delgada de 1 píxel que se repetirá verticalmente en el medio. 3) La pieza inferior. La cuarta parte del diagrama a continuación muestra las tres piezas después de que fueron cortadas.

Coloca estos archivos de imagen en una carpeta llamada "imágenes".

Nota: a Internet Explorer NO le gusta la transparencia PNG. Incluso IE 7 solo lo admite parcialmente. Si animas un PNG con JavaScript, cualquier área con transparencia se volverá negra momentáneamente mientras esté en movimiento. Estoy usando este diseño sabiendo muy bien que tendrá problemas en IE que son difíciles de solucionar.

Paso 3 - Escribe el marcado HTML / CSS

Con las imágenes divididas, podemos pasar al marcado HTML y CSS. Esta será la parte más fácil de todo  el tutorial.

El HTML

Este marcado HTML pronto se moverá a un archivo JavaScript externo, así que simplemente escríbelo en donde sea más conveniente y se pueda consultar más adelante.

1

	<div class="tip">

2

		<div class="tipMid"></div>

3

		<div class="tipBtm"></div>

4

	</div>

Hay tres etiquetas div. Dos anidadas dentro de una madre. El primer div, "tip", se usará para mantener todo junto y muestre la parte superior del tooltip, tipTop.png.

"tipMid" eventualmente mantendrá el texto que mostrará el tooltip. También tendrá tipMid.png repitiendo verticalmente dentro de él.

"tipBtm" solo está ahí para mostrar la parte inferior del tooltip, tipBtm.png.

Dentro de index.html, agrega un montón de texto de relleno y algunos elementos con sus atributos de título completados. Como:

1

	<a href="#" title="This is the tooltip text">This is a link</a>

En el encabezado de index.html, deberás vincular la hoja de estilo y los dos archivos JavaScript.

1

	<link href="style.css" rel="stylesheet" type="text/css" media="all" />

2

	<script type="text/javascript" src="jquery-1.3.1.min.js"></script>

3

	<script type="text/javascript" src="jquery.betterTooltip.js"></script>

El CSS

El CSS utilizado para este tooltip es relativamente simple, solo agrega lo siguiente a style.css

1

	.tip {

2

		width: 212px;

3

		padding-top: 37px;

4

		display: none;

5

		position: absolute;

6

		background: transparent url(images/tipTop.png) no-repeat top;}

7

8

	.tipMid {background: transparent url(images/tipMid.png) repeat-y; padding: 0 25px 20px 25px;}

9

	.tipBtm {background: transparent url(images/tipBtm.png) no-repeat bottom; height: 32px;}

Déjame explicarte lo anterior.

El elemento de envoltura, .tip, se usa para mantener todo junto. Tiene un relleno superior de 37 píxeles. Esa es la altura de la imagen en el fondo. El relleno empujará los elementos secundarios hacia abajo para revelar la imagen detrás. También tiene una posición absoluta para que podamos moverlo en la parte superior del contenido de la página

Las otras dos clases simplemente tienen una imagen de fondo y, en el caso de .topMid, relleno para dar al contenido que se colocará dentro, algo de espacio para respirar.

Paso 4 - ¿Por qué un complemento?

jQuery es bastante genial por sí mismo. Pero la verdadera magia está en extenderlo con un complemento. Cuando pones tu código en un complemento, lo estás haciendo reutilizable. De esa manera puedes construir una biblioteca de códigos y nunca escribir el mismo código dos veces.

Aquí está el complemento del tooltip en su totalidad:

1

	$.fn.betterTooltip = function(options){

2

3

		/* Setup the options for the tooltip that can be 

4

		   accessed from outside the plugin              */

5

		var defaults = {

6

			speed: 200,

7

			delay: 300

8

		};

9

10

		var options = $.extend(defaults, options);

11

12

		/* Create a function that builds the tooltip 

13

		   markup. Then, prepend the tooltip to the body */

14

		getTip = function() {

15

			var tTip = 

16

			"<div class='tip'>" +

17

				"<div class='tipMid'>"	+

18

				"</div>" +

19

				"<div class='tipBtm'></div>" +

20

			"</div>";

21

			return tTip;

22

		}

23

		$("body").prepend(getTip());

24

25

		/* Give each item with the class associated with 

26

		   the plugin the ability to call the tooltip    */

27

		$(this).each(function(){

28

29

			var $this = $(this);

30

			var tip = $('.tip');

31

			var tipInner = $('.tip .tipMid');

32

33

			var tTitle = (this.title);

34

			this.title = "";

35

36

			var offset = $(this).offset();

37

			var tLeft = offset.left;

38

			var tTop = offset.top;

39

			var tWidth = $this.width();

40

			var tHeight = $this.height();

41

42

			/* Mouse over and out functions*/

43

			$this.hover(function() {

44

				tipInner.html(tTitle);

45

				setTip(tTop, tLeft);

46

				setTimer();

47

			}, 

48

			function() {

49

				stopTimer();

50

				tip.hide();

51

			}

52

		);		   

53

54

		/* Delay the fade-in animation of the tooltip */

55

		setTimer = function() {

56

			$this.showTipTimer = setInterval("showTip()", defaults.delay);

57

		}

58

59

		stopTimer = function() {

60

			clearInterval($this.showTipTimer);

61

		}

62

63

		/* Position the tooltip relative to the class 

64

		   associated with the tooltip                */

65

		setTip = function(top, left){

66

			var topOffset = tip.height();

67

			var xTip = (left-30)+"px";

68

			var yTip = (top-topOffset-60)+"px";

69

			tip.css({'top' : yTip, 'left' : xTip});

70

		}

71

72

		/* This function stops the timer and creates the

73

		   fade-in animation                          */

74

		showTip = function(){

75

			stopTimer();

76

			tip.animate({"top": "+=20px", "opacity": "toggle"}, defaults.speed);

77

		}

78

	});

79

};

Paso 5 - Escribe el complemento

Ahora que has visto cómo se ve el código, es hora de diseccionarlo. Para comenzar, crea un archivo .js y asígnale el nombre jquery.betterTooltip.js para que sea compatible con los complementos estándar de jQuery

Dentro de ese archivo .js, incluye el siguiente código:

1

	$.fn.betterTooltip = function(){

2

3

	});

Esto crea una función pública que se puede invocar desde el encabezado de un documento u otro archivo externo .js. Para invocar tu complemento, debes llamar a la línea de seguimiento desde unevento de página $(document).ready.

1

	$(document).ready(function(){

2

		$('.tTip').betterTooltip();

3

	});

La línea anterior adjuntará el complemento a cada elemento con el nombre de clase "tTip". Del mismo modo, podrías adjuntarlo a cualquier elemento de tu elección.

Exponer la configuración del complemento

Para evitar tener que modificar el complemento para cada proyecto, es importante exponer algunas de las variables y configuraciones para que puedan modificarse desde fuera del complemento en sí. El objetivo final sería nunca tocar el complemento, solo ajusta su configuración. Para hacer esto, agrega lo siguiente a ese primer fragmento de código:

1

	$.fn.betterTooltip = function(options){

2

		/* Setup the options for the tooltip that can be 

3

		   accessed from outside                      */

4

5

		var defaults = {

6

			speed: 200,

7

			delay: 300

8

		};

9

10

		var options = $.extend(defaults, options);

11

	});

Esto permite que la configuración "velocidad" y "retraso" se modifiquen cuando el complemento se invoca de esta manera:

1

	$('.tTip').betterTooltip({speed: 600, delay: 600});

Estos son completamente opcionales. Si no se especifica, el complemento utilizará los valores predeterminados.

Inyectar el marcado del tooltip

¿Recuerdas el HTML que escribiste para el tooltip? Ahora hará su aparición oficial. En este fragmento de código, la manipulación de contenido "prepend" de jQuery se utiliza para inyectar el tooltip inmediatamente después de la apertura de la etiqueta cuerpo. De esta manera podemos asegurarnos de que el tooltip se posicione encima de todo.

1

	/* Create a function that builds the tooltip 

2

	   markup. Then, prepend the tooltip to the body */

3

	getTip = function() {

4

		var tTip = 

5

		"<div class='tip'>" +

6

			"<div class='tipMid'>"	+

7

			"</div>" +

8

			"<div class='tipBtm'></div>" +

9

		"</div>";

10

		return tTip;

11

	}

12

	$("body").prepend(getTip());

La función $(this).each

Este es uno de los aspectos más importantes y útiles de un complemento jQuery. La función $(this).each recorre cada elemento de página que está asociado con el complemento cuando se evoca. En este caso es todos los elementos con la clase "tTip". Cuando recorre cada elemento, aplica las propiedades y los métodos. que tu especifiques.

1

	$(this).each(function(){

2

3

		var $this = $(this);

4

		var tip = $('.tip');

5

		var tipInner = $('.tip .tipMid');

6

7

		var tTitle = (this.title);

8

		this.title = "";

9

10

		var offset = $(this).offset();

11

		var tLeft = offset.left;

12

		var tTop = offset.top;

13

		var tWidth = $this.width();

14

		var tHeight = $this.height();

15

16

		/* Mouse over and out functions*/

17

		$this.hover(function() {

18

			tipInner.html(tTitle);

19

			setTip(tTop, tLeft);

20

			setTimer();

21

		}, 

22

		function() {

23

			stopTimer();

24

			tip.hide();

25

		}

26

	);

Esto es bastante simple. La mitad superior consta de un conjunto de propiedades para la altura, el ancho, la posición x e y e incluso el valor del atributo de título de los elementos "tTip". Estoy usando el método CSS jQuery offset () para tomar la posición superior e izquierda. También hay una función de desplazamiento asignada a cada clase "tTip" que llama a los métodos al pasar el mouse por encima y fuera. Estos métodos serán descritos más abajo en el tutorial.

Una parte importante de la función $(this).each es esta línea de código aquí que elimina el atributo title:

1

	this.title = "";

El objetivo de este tooltip es cambiar el tooltip genérico con una versión más llamativa. Si no eliminas el atributo de título, que el navegador utiliza para generar la información sobre herramientas genérica, obtendrás tooltips de duelo. Como esto:

Retrasa la animación de aparición gradual del tooltip

1

		/* Delay the fade-in animation of the tooltip */

2

		setTimer = function() {

3

			$this.showTipTimer = setInterval("showTip()", defaults.delay);

4

		}

5

6

		stopTimer = function() {

7

			clearInterval($this.showTipTimer);

8

		}

Estos dos métodos, setTimer y stopTimer se utilizan para crear un retraso desde el momento en que el usuario desplaza su cursor sobre el elemento con la clase "tTip" y cuando la información sobre herramientas hace su aparición. Esta es importante para evitar usuarios molestos. Estoy seguro de que todos compartimos la frustración cuando accidentalmente nos desplazamos sobre uno de esos anuncios emergentes que están ocultos en el contenido de los sitios.

El método setTimer crea un objeto setInterval que llama a "showTip ()" una vez transcurrido el tiempo asignado. Para que setInterval no se repita infinitamente, se llama al método stopTimer para detener el objeto setInterval.

Posiciona el tooltip

1

		/* Position the tooltip relative to the class 

2

		   associated with the tooltip                */

3

		setTip = function(top, left){

4

			var topOffset = tip.height();

5

			var xTip = (left-30)+"px";

6

			var yTip = (top-topOffset-60)+"px";

7

			tip.css({'top' : yTip, 'left' : xTip});

8

		}

La función de desplazamiento dentro del bucle $(this).each, que se creó anteriormente, llama a setTip(). Su propósito es posicionar  el tooltip directamente encima del elemento "tTip". Esto se hace antes de la animación de aparición gradual.

Animación emergente del tooltip

1

		/* This function stops the timer and creates the

2

		   fade-in animation                          */

3

		showTip = function(){

4

			stopTimer();

5

			tip.animate({"top": "+=20px", "opacity": "toggle"}, defaults.speed);

6

		}

7

	});

8

};

Por último, pero no menos importante, la función showTip(). Esto utiliza el efecto animate() de jQuery para atenuar el tooltip mientras simultáneamente lo desliza hacia abajo.

Terminando. . .

Una vez que hayas terminado y estés satisfecho con tus resultados, puedes mover tu complemento desde la página HTML básica llena de texto de relleno a el mundo real y ponerlo en uso.

Este es un ejemplo muy básico de lo que puede hacer un complemento del tooltip. La parte divertida ahora será hacerlo más robusto. Hay todo tipo de formas de expandir este complemento. Una mejora necesaria sería detectar la ubicación del tooltip en relación con los límites de la ventana del navegador y mostrar el tooltip para que no se entrecorte.

Gracias por leer este tutorial. Espero que arroje algo de luz sobre cómo puedes usar jQuery para mejorar la interfaz de tu sitio web.

¡Que comiencen los comentarios! Quiero escuchar lo que piensas. ¿Esta técnica realmente ayuda a los usuarios a moverse más fácilmente, o es solo otra molestia?

• Suscríbete a la fuente RSS de NETTUTS para obtener más artículos y artículos de desarrollo web diarios.