Un tooltip
Es una herramienta de ayuda visual patentada por Microsoft el 19 de Diciembre del 2002 (patente 20020191027), que funciona al situar o pulsar con el ratón sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.
Los tooltip son una variación de los globos de ayuda y es un complemento muy usado en programación, dado que proporciona información adicional sin necesidad de que el usuario la solicite.
Aqui se mostrara un ejemplo de los que es Tooltip pero para ello debes tener el codigo fuente de mootools en cualquieras de sus versiones
mootools-1.2-core-yc.js
mootools-1.2-core-jm.js
Ejemplo:
<!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í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’);
});
.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>
