SummArg | Cursos y recursos para webmasters

14/10/2010

Tooltips de forma simple y elegante con jQuery y CSS

SohTanaka nos trae esta simple pero elegante forma de añadir Tooltips a nuestra web utilizando jQuery y CSS. Como pueden ver en la imagen los Tooltips pueden tener una imagen para apoyar la información colocada. Si quieren ver un demo pueden hacer click aquí.

Para comenzar debemos descargar el plugin jQuery (que se descarga desde jquery.com) o bien utilizar uno hosteado en Google.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

Acto seguido colocamos el siguiente código indicando como habrá de funcionar nuestro Tooltip

<script type="text/javascript">
$(document).ready(function() {
	//Tooltips
	$(".tip_trigger").hover(function(){
		tip = $(this).find('.tip');
		tip.show(); //Mostrar tooltip
	}, function() {
		tip.hide(); //Ocultar tooltip
	}).mousemove(function(e) {
		var mousex = e.pageX + 20; // Obtener coordenadas X
                var mousey = e.pageY + 20; // Obtener coordenadas Y
                var tipWidth = tip.width(); //Obtener el ancho del tooltip
                var tipHeight = tip.height(); //Obtener el alto del tooltip
                //Distancia del elemento desde el borde derecho
                var tipVisX = $(window).width() - (mousex + tipWidth);
		//Distancia del elemento desde el borde de abajo
                var tipVisY = $(window).height() - (mousey + tipHeight);
		if ( tipVisX < 20 ) { //Si el tooltip se excede horizontalmente
                mousex = e.pageX - tipWidth - 20;
		} if ( tipVisY < 20 ) { //Si el tooltip se excede verticalmente
                mousey = e.pageY - tipHeight - 20;
		}
		tip.css({  top: mousey, left: mousex });
	});
});
</script>

El tooltip busca abrirse hacia abajo a la derecha, pero en el caso de que no tenga espacio para ello buscará la dirección opuesta. En la web del autor lo explican con mayor detalle.

En el CSS colocaremos:

.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;
}

Finalmente para llamar al Tooltip y escribir su contenido

<p>Esta es una <span>oración <span style="width: 450px;"><img src="http://www.sitio.com/imagen.gif" style="float: left; margin-right: 20px;" alt="" />este es el texto del tooltip
</span></span></p>

Dejar un comentario