|
Como colocar un tooltip (cuadrito de ayuda) sobre los elementos de mi página
El siguiente código nos enseña como hacer que en nuestra página aprezca un cuadrito con información de ayuda.
NOTA: Se corrigió el error del desplazamiento generado en Internet Explorer cuando se "escrolaba" la página.
La idea es que ese cuadrito contenga información estilizada con HTML y no solo el clásico "tool tip" color crema que se ve demasiado simple.
La siguiente imagen muestra como se verÃa la ayuda al posicionar el cursor sobre un botón de ayuda.
[imagen en="archivos/tooltip.gif"]
NOTA: El diseño de la ayuda soporta todo tipo de HTML, aunque en el ejemplo se simplificó para no complicar demasiado el código.
A continuación tenemos el código completo y más abajo se explican a detalle cada una de las secciones:
<html>
<head>
<script language=javascript>
// ********** Parte 1: Inicializar valores
window.onload = init;
MouseX=0;
MouseY=0;
// ********** Parte 2: Funciones
// Función para capturar el evento "Mouse Move" (al moverse el mouse)
function init() {
if (window.Event) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = getXY;
}
// Función que actualiza la posición del ratón
function getXY(e) {
MouseX = (window.Event) ? e.pageX : (event.clientX + document.body.scrollLeft);
MouseY = (window.Event) ? e.pageY : (event.clientY + document.body.scrollTop);
}
// Función que aparece y desaparece el cuadrito de la ayuda
function hint( id, status )
{
var htmObj = document.getElementById(id)
if(!htmObj) return ;
htmObj.style.visibility = status ? 'visible' : 'hidden';
htmObj.style.top = (MouseY+20) + 'px';
htmObj.style.left = (MouseX+20) + 'px';
}
</script>
<!-- //********** Parte 3: Estilos -->
<STYLE type="text/css">
.help {
cursor: help;
}
.hint {
background-color: #FFEEAA;
font-family: verdana,arial,helvetica;
visibility: hidden;
font-size: 8pt;
position: absolute;
padding: 1px 2px;
border: 1px solid #000000;
color: #006600;
width: 200px;
left: 328px;
}
</STYLE>
</head>
<body>
<!-- // ********** Parte 4: Cuadritos con las ayudas
// NOTA: Cada una debe tener un id diferente -->
<div id="ayuda1" class="hint">
<b>Teléfono</b><br /><br />
Introduce solamente números, sin guiones ni espacios.<br /><br />
Ejemplo: 01555123456
</div>
<div id="ayuda2" class="hint">
<b>Descriptores</b><br /><br />
Puedes introducir palabras clave o bién frases, separando cada una de ellas
por un puto y coma.<br /><br />
Ejemplo: Javascript;CSS;HTML
</div>
<div id="ayuda3" class="hint">
<b>Número de Cuenta</b><br /><br />
Captura tu Número de cuenta sin introducir guiones ni espacios.
Puedes tomarlo de la parte superior izquierda de tu credencial<br /><br />
Ejemplo: 978371
</div>
<!-- // ********** Parte 5: Cuerpo de la página
// Definimos los objetos que van a llevar la ayuda -->
<img src="ayu.gif" width="19" height="19" class="help"
onmouseover="javascript:hint('ayuda1',1)"
onmouseout ="javascript:hint('ayuda1',0)" />
<br><br><br><br>
<img src="ayu.gif" width="19" height="19" class="help"
onmouseover="javascript:hint('ayuda2',1)"
onmouseout ="javascript:hint('ayuda2',0)" />
<br><br><br><br>
<img src="ayu.gif" width="19" height="19" class="help"
onmouseover="javascript:hint('ayuda3',1)"
onmouseout ="javascript:hint('ayuda3',0)" />
<br><br><br><br>
</body>
</html> |
Dentro de la sección HEAD de nuestro código HTML insertamos dos secciones, una de código en JAVASCRIPT y un bloque de definición de Estilos (STYLE).
Sección JAVASCRIPT
Comenzamos indicandole que en el evento onload (Despues de cargar) se ejecute nuestra función init(). La cual establece que cada vez que se mueva el ratón, se ejecute la función getXY(). en esta función se actualizan las variables globales MouseX y MouseY
// ********** Parte 1: Inicializar valores
window.onload = init;
MouseX=0;
MouseY=0;
// ********** Parte 2: Funciones
// Función para capturar el evento "Mouse Move" (al moverse el mouse)
function init() {
if (window.Event) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = getXY;
}
// Función que actualiza la posición del ratón
function getXY(e) {
MouseX = (window.Event) ? e.pageX : (event.clientX + document.body.scrollLeft);
MouseY = (window.Event) ? e.pageY : (event.clientY + document.body.scrollTop);
} |
Posteriormente tenemos una función llamada hint() que recibe como parámetro el ID del cuadrito de ayuda y un valor de estado que puede ser 0 (cero) o 1 (uno), donde 1=Aparecer y 0=ocultar.
// Función que aparece y desaparece el cuadrito de la ayuda
function hint( id, status )
{
var htmObj = document.getElementById(id)
if(!htmObj) return ;
htmObj.style.visibility = status ? 'visible' : 'hidden';
htmObj.style.top = (MouseY+20) + 'px';
htmObj.style.left = (MouseX+20) + 'px';
} |
Sección de Estilos (STYLE)
Básicamente definiremos 2 estilos, uno llamado .help que nos define el cursor de ayuda predeterminado del navegador y otro llamado .hint que contendrá los estilos básicos para cada cuadrito de ayuda como son Colores, bordo, fuentes, tamaños, etc.
Le aplicaremos el estilo .help a los elementos que vayamos a asociarles el tooltip.
<!-- //********** Parte 3: Estilos -->
<STYLE type="text/css">
.help {
cursor: help;
}
.hint {
background-color: #FFEEAA;
font-family: verdana,arial,helvetica;
visibility: hidden;
font-size: 8pt;
position: absolute;
padding: 1px 2px;
border: 1px solid #000000;
color: #006600;
width: 200px;
left: 328px;
}
</STYLE> |
Sección de Contenido (BODY)
Ya dentro del cuerpo de la página (BODY) vamos a iniciar definiendo los cuadritos que van a fungir como ayudas-tooltips. Cada uno de ellos deberá aplicarsele la clase .hint y se le asigna un ID el cual deberá ser único. Hay que tener mucho cuidado de que no le asignemos el mismo ID a mas de un objeto porque nos podrÃa dar resultados inesperados.
Un ejemplo de una de las ayudas serÃa:
<div id="ayuda3" class="hint">
<b>Número de Cuenta</b><br /><br />
Captura tu Número de cuenta sin introducir guiones ni espacios.
Puedes tomarlo de la parte superior izquierda de tu credencial<br /><br />
Ejemplo: 978371
</div> |
Cabe mencionar que dentro del DIV podemos poner cualquier cantidad de texto y que se pueden utilizar todo tipo de elementos HTML, como pueden ser ligas, imagenes, fuentes, colores, etc.
Y finalmente definimos los objetos que van a contener dicha ayuda
<img src="ayu.gif" width="19" height="19" class="help"
onmouseover="javascript:hint('ayuda1',1)"
onmouseout ="javascript:hint('ayuda1',0)" /> |
en este ejemplo se lo estoy aplicando a una imagen del tipo:
Pero se le puede aplicar a practicamente cualquier elemento como puede ser una liga, un parrafo, un DIV, etc.
Y simplemente le agrego los parámetros siguientes:
class="help"
onmouseover="javascript:hint('ayuda1',1)"
onmouseout ="javascript:hint('ayuda1',0)"
en donde la primera lÃnea es para cambiar el cursor normal por el cursor de ayuda.
La segunda es para indicarle que cuando el raton esté encima (Mouseover) aparezca la ayuda1 (valor uno)
Y por último la tercera lÃnea le indica que cuando el cursor del ratón deje de estar encima (Mouseout) se desaparezca (valor cero).
Espero y les sea de utilidad. Lo he probado en Mozila (Firefox) y en Internet Explorer 6 con buenos resultados.
| 
