JQuery -ToolTips Personalizados-





Los mensajes de ayuda o "ToolTips" son aquellos textos que "saltan" cada vez que pasamos el puntero por encima de un enlace y que nos ayudan a averiguar a dónde nos dirigirá o que nos proveen de cierta información sobre el mismo.
Generalmente es un recurso muy poco utilizado, ya que existen otras herramientas que incluso muestran una captura de la página del enlace. Sin embargo es muy recomendable su uso, ya que sirven al usuario de una información que en muchos casos facilita su navegación por la web.

Utilizando la potente librería Jquery vamos a potenciar la manera en que mostramos estos mensajes, y dejar atrás esa apariencia amarillenta tan aburrida que no nos gusta nada.

Lo primero que tenemos que hacer es incluir la librería JQuery (si no la tenemos ya), para lo que nos vamos a servir de la API de Google:

Poner antes de </head>

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

A continuación, añadimos el script entre las etiquetas <head> y </head> de nuestra plantilla:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("body").append("<div id='ToolTipDiv'></div>");
$("a[title]").each(function() {
$(this).hover(function(e) {
$().mousemove(function(e) {
var tipY = e.pageY + 16;
var tipX = e.pageX + 16;
$("#ToolTipDiv").css({'top': tipY, 'left': tipX});
});
$("#ToolTipDiv").stop(true, true);
$("#ToolTipDiv")
.html($(this).attr('title'))
.fadeIn("fast");
$(this).removeAttr('title');
}, function() {
$("#ToolTipDiv").stop(true, true);
$("#ToolTipDiv").fadeOut("fast");
$(this).attr('title', $("#ToolTipDiv").html());
});
});
});
//]]>
</script>


Ahora tan sólo queda darle la apariencia que deseemos y lo hacemos con un poco de CSS que colocamos antes de ]]></b:skin>:

/* ------------------ ToolTips JQuery ------------------------- */
div#ToolTipDiv {
Position: absolute;
top: 100px;
left: 100px;
color: #333333;
height: 20px;
border: 3px solid #666666;
background-color: #CCCCCC;
display: none;
padding: 3px;
cursor:pointer;
}


Los "ToolTips" se definen en función del título de cada enlace, es decir, del atributo title, que será el mensaje que se muestra al pasar el cursor por encima. Para ver un ejemplo; los siguientes enlaces ( o cualquiera del blog... bueno, casi, casi cualquiera...):

Descripción corta: TodoTwitter.es

<a target="_blank" href="http://todotwitter.blogspot.com/" title="Ir al blog de @TwittBoy">TodoTwitter.es</a>


Descripción larga: BanakaBanaka.Com

<a target="_blank" href="http://www.banakabanaka.com/home.php" title="Ir a nuestra web y hacerte con una pieza exclusiva en plata realizada sólo pata ti porque eres únic@!!">BanakaBanaka.Com</a>


************ EDITADO ************
Estos tooltips no se muestran correctamente en Explorer (cómo no). Los que ahora mismo ves en este blog son los que se explican en esta entrada.

************************************

Visto enSwitch on the code






Subir || Bajar

7 opiniones:

Unknown :

Sólo quiero hacerlo para el header, ¿cómo hago?

Iván_RG :

TRECARUNGA, en el script, al principio, donde pone:

$("body").append(....

Cambia "body" por #header-wrapper y sólo funcionará en el header.

Cuéntanos si te funciona!!

Diego :

¿Y si quieres hacerlo para todo el blog, incluyendo head, body, sidebar...?

Iván_RG :

Hola Diego, pues si los quieres en todo el blog, no cambies nada y lo pones tal y como está en la entrada.

De todas maneras, yo te recomendaría usar estos, ya que se visualizan tanto en Firefox como en el Explorer. Los de esta entrada se "solapan" con el alt o con el title mismo en el Explorer...no sé, hace cosas muy raras...

En fin, yo utilizaría estos que son los que ahora mismo ves en el blog.

Y gracias por tu comentario!!

Diego :

Encontré algo parecido y a la vez curioso (puedes echarle un vistazo AQUÍ). Aún no sé cual de los dos implementar :O

Diego :

Uy, siento hacer spam, pero es que el enlace no va Oo

Lo dejo tal cual: http://quiterandom.com/tutorials/nice-link-titles/

Iván_RG :

Diego, al gusto, esos tampoco tienen mala pinta y se ven en cualquier navegador, pero los que tengo puesto ahora mismo en el blog son estos(tengo que editar esta entrada).

Muchas gracias por tu comentario, y ya nos contarás por cuál te has decidido...
Saludos!!

Desplegar Formulario
Subir

Deja aquí tu comentario:
(y recuerda que hemos retirado los "Nofollow")

Directorios
Blogs con EÑE directorio de blogs
Enlázanos
Código +/-

Código +/-

Código +/-
 

Formulario de Contacto


Lo quieres?

Nombre*: E-Mail*:

Asunto:

Mensaje*:

¿Cuantos lados tiene un Cuadrado?*:


(Los campos marcados con * son obligatorios)