Los tooltips (en sitios webs) son pequeños recuadros de información que aparecen al posicionar el puntero del ratón sobre un elemento (imagen) o un enlace. Normalmente se utilizan para ofrecer información adicional sobre el elemento seleccionado o para mostrar al usuario pequeños mensajes de ayuda. Para que los Tooltips funcionen en una página web debemos llamar a nuestra “querida” libreria de jQuery una vez más.
Es por eso que recomiendo usar “Simple Tooltip w/ jQuery & CSS” y como funciona este Tooltip, pues vean la demo:
¿Es de tu agrado?, si es asi sigue leyendo ya que en este tutorial enseñaremos lo básico para que funcione nuestro tooltip, vamos por el primer paso.
Llamado del jQuery y la magia
Tras el debemos agregar este código tras el inicio del <body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
Obviamente esta libreria puede guardarla en el servidor que deseen, pero la dejo como muestra para que sepan que versión ocupamos, aunque ya en jQuery.com pueden encontrar la versión 1.4.4.
Luego de terminado el llamado a la libreria jQuery debemos agregar abajo este código, que llama a las funciones requeridas para el Tooltips.
<script type="text/javascript">
$(document).ready(function() {
//Tooltips
$(".tip_trigger").hover(function(){
tip = $(this).find('.tip');
tip.show(); //Show tooltip
}, function() {
tip.hide(); //Hide tooltip
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coodrinates
var mousey = e.pageY + 20; //Get Y coordinates
var tipWidth = tip.width(); //Find width of tooltip
var tipHeight = tip.height(); //Find height of tooltip
//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
//Distance of element from the bottom of viewport
var tipVisY = $(window).height() - (mousey + tipHeight);
if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
mousex = e.pageX - tipWidth - 20;
} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
mousey = e.pageY - tipHeight - 20;
}
tip.css({ top: mousey, left: mousex });
});
});
</script>
El estilo CSS del Tooltips
.tip {
color: #fff;
background:#1d1d1d;
display:none; /*--Hides by default--*/
padding:10px;
position:absolute; z-index:1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
Estilos del Tooltip
Mostando una pequeña imagen y pasando el mouse por encima se despliega el tooltip con una imagen mucho más grande:
<a href="http://www.Cambiar-URL.com" target="_blank" class="tip_trigger" style="float: left; margin: 5px 20px 20px 0pt; padding: 10px; border: 1px dashed rgb(221, 221, 221);">
<img src="URL_imagen_chica.gif" alt="">
<span style="display: inline; top: 361px; left: 329px;" class="tip"><img src="URL_imagen_grande.gif" alt=""></span>
</a>
El resultado es:
Un link que al pasar el mouse por encima, muestra una caja de una imagen con un texto
<a class="tip_trigger" href="http://www.Url-Modificar.com">Texto con el LINK! <span class="tip" style="width: 450px;"> <img src="tooltip_archivos/amazeelabs_thumb.gif" style="float: left; margin-right: 20px;" alt=""> Hola soy un texto que puede ser completamente modificable a lo que yo desee. </span> </a>
El resultado es parecido a esto:
Un link que al pasar el mouse por encima, muestra una caja de información de texto pequeña.
<a href="#" class="tip_trigger">Texto con elEnlace <span style="display: none; top: 391px; left: 671px;" class="tip">Texto que se muestra al pasar el mouse</span></a>
El resultado es parecido a esto:
Recomendaciones:
- El tooltip debe contener información simple y clara.
- No recargar la página de tooltips, una cosa es guiar y enseñemos al usuario, pero no pensemos que es tonto.
- Nunca poner tooltips en áreas grandes.
- Aunque puede resultar obvio, pero el contenido del tooltip tiene que estar directamente relacionado con el objetivo del link.
- Asegurémonos que el tooltip llama suficientemente la atención, pero que no sea demasiado grande.
- El tooltip debe desaparecer cuando el ratón sale del punto objetivo.
Para más información sobre el funcionamiento de este Tooltip pueden visitar “Simple Tooltip w/ jQuery & CSS”
