Este tutorial describe de forma sencilla cómo podemos implementar tool tips (un pequeño cuadro informativo que aparece cuando posamos el cursor sobre un elemento en la pantalla) con efectos en nuestra aplicaciones web gracias a Mootools.

Tool Tip con Mootools

Bien lo primero que hacer es descargar la librería core de mootools 1.2 y la librería more con el plugin TIPS.

Ahora vamos al ejemplo práctico, el cual es realmente sencillo. Podemos modificarlo y aprender así a configurarlo según nuestro gusto.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<script type="text/javascript" src="mootools-1.2-core-yc.js"></script>
<script type="text/javascript" src="mootools-1.2-more.js"></script>
    
<script type="application/javascript">
	    window.addEvent('domready',function()
        {
            var Tips1 = new Tips('.Tips1',{
                    showDelay: 400,
                    hideDelay: 400,
                    fixed:true
                });
            Tips1.addEvent('onShow', function(tip){
              tip.fade('in');
            });
            Tips1.addEvent('onHide', function(tip){
              tip.fade('out');
            });

             $('lnk').store('tip:title', 'Titulo del tooltip');
             $('lnk').store('tip:text', 'Texto del tooltip, el cual puede extender hasta cierto limite');
			 
			 $('lnk2').store('tip:text', 'Texto para un segundo cuadro, el titulo puede ir definido en el atributo title');

    	});
</script>
   
<style type="text/css">
	.tip {
    	Z-INDEX: 13000; WIDTH: 130px; COLOR: #000
	}
	.tip-title {
    	PADDING-RIGHT: 8px; PADDING-LEFT: 8px; FONT-WEIGHT: bold; FONT-SIZE: 11px; BACKGROUND: #c3df7d; PADDING-BOTTOM: 4px; MARGIN: 0px; COLOR: #3e4f14; PADDING-TOP: 8px; BORDER-BOTTOM: #b5cf74 1px solid
	}
	.tip-text {
		PADDING-RIGHT: 8px; PADDING-LEFT: 8px; FONT-SIZE: 11px; BACKGROUND: #cfdfa7; PADDING-BOTTOM: 8px; PADDING-TOP: 4px
	}
</style>
   
</head>
<body>
	<a href="#" id="lnk" class="Tips1">mostrar</a>
    <a href="#" id="lnk2" title="Hola Mundo!!" class="Tips1">mostrar</a>
</body>
</html>

Vía Codeline