Un tooltip que se desliza en los enlaces

En CSS Globe nos muestran la forma de crear un tooltip* muy animado en cualquier enlace, con animado quiero decir que el tooltip que se desplaza a lo largo y ancho del contenido del enlace, y funciona con la ayuda de jQuery. Me gusta porque de algún modo promueve el uso del atributo title en los enlaces, ya que el tooltip mostrará el contenido o texto que se ponga en dicho atributo. Voy a usar el primer ejemplo a petición de Dante.



Este tooltip se desliza al mover el cursor del mouse sobre el elemento en el que se aplique, y aunque lo explican para aplicarlo en el texto de un enlace, se puede usar en una imagen que tenga un enlace.



Puedes verlo en acción en este blog donde dice "Tooltip en enlaces" (en la columna lateral) o en la primer entrada. También puedes ver el resultado en la imagen, aunque, mejor echa un vistazo al blog con el ejemplo, ya que aquí te perderás de la acción.

Cómo agregar el tooltip a cualquier enlace

1. Necesitas tener agregado en la plantilla jQuery antes de </head>, si ya lo tienes, puedes actualizarlo por su última versión, que hasta el día de hoy es la siguiente, y que lo descargamos desde la librería de Google:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

2. Luego, necesitas agregar este script inmediatamente después de jQuery (del código anterior)...

<script type='text/javascript'>

//<![CDATA[

/*

 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

 */

this.tooltip=function(){xOffset=10;yOffset=20;$("a.tooltip").hover(function(e){this.t=this.title;this.title="";$("body").append("<p id='tooltip'>"+this.t+"</p>");$("#tooltip").css("top",(e.pageY-xOffset)+"px").css("left",(e.pageX+yOffset)+"px").fadeIn("fast")},function(){this.title=this.t;$("#tooltip").remove()});$("a.tooltip").mousemove(function(e){$("#tooltip").css("top",(e.pageY-xOffset)+"px").css("left",(e.pageX+yOffset)+"px")})};$(document).ready(function(){tooltip()});

//]]>

</script>

Cómo funciona. Lo que hace el script, es tomar el contenido del atributo "title" que está dentro de la etiqueta "a" (que hace que se cree el enlace) y lo muestra en el tooltip.



3. Después, necesitas agregar el CSS, que puedes cambiar para darle la apariencia que quieras al tooltip, y lo agregas yendo a Plantilla > Personalizar > Avanzado > Añadir CSS :

#tooltip{position:absolute;background:#000;padding:2px 5px;color:#333;display:none;opacity:.8;filter:alpha(opacity=80)}

En este caso, el color de fondo del tooltip es negro (background:#000;)y el color del texto es blanco(color:#fff;).También agregamos opacidad para darle transparencia, opacity:.8; y para que se vea la transparencia en Internet Explorer versión 8 y anteriores: filter:alpha(opacity=80).





4. Finalmente usaremos este HTML, que tendrá el enlace, de otro modo no fucionará (ver explicación de como funciona el script). Lo podemos poner en un gadget con la opción de HTML/Javascript, o en una entrada del blog.



Para el texto del enlace:

<a href="#" class="tooltip" title="El contenido del tooltip">El texto del enlace</a>

Para la imagen con enlace:

<a href="#" class="tooltip" title="El contenido del tooltip"><img src="URL_de_la_imagen" alt="" /></a>

Donde está la almohadilla "#", se pone la dirección web a donde se va a dirigir cuando se haga click sobre enlace/imagen. En el resto de lo que tienes que editar y que está resaltado de rojo, dice que ponerse.

El uso del tooltip en el caso de las imágenes con enlace

Recuerda que en tooltip debería mostar de algún modo la naturaleza del enlace, agregando información adicional a éste.

Por ejemplo, supongamos que pones una imagen (fotografía) en la columna lateral, de cuando fuiste a Disneyland, en donde estás abrazando a Mickey Mouse, entonces pondrías el atributo title al enlace (en la etiqueta a) con esta información, por ejemplo: "Leer mi aventura en Disneyland este verano", y  enlace te enviará al post contando tu aventura. De ese modo el usuario sabrá que al hacer click en la imagen, podrá leer tu aventura.



Tanto las imágenes (la etiqueta img) como los enlaces (la etiqueta a) admiten el atributo "title". Lo ideal sería poner el atributo title a la imagen, puesto que lo que se ve es ésta,  pero lo agregamos dentro de la etiqueta a para funcione el tooltip (que también es válido).

*Un tooltip, es un texto que emerge al poner el puntero del ratón sobre un enlace o una imagen, y el texto que aparece es el que se ha puesto en el atributo title, aunque se puede simular un tooltip sin usar dicho atributo.

Lecturas recomendadas:

El atributo title de los enlaces

El atributo title de los enlaces

El atributo title en las imágenes

Usando atributo title y alt en las imágenes