Buenas, tengo un formulario al que yo mismo le he construido unos tooltips que se posicionan en el raton. Esto funciona bien, pero el problema es que cada vez que sale el tooltip y mueves el raton encima del mismo, se borra y vuelve a salir, lo cual provoca unos espasmos un tanto molestos, no se si habra alguna solución. Os dejo el código, y comentar que están posicionados en absolute. Gracias de antemano
Código HTML:
<!DOCTYPE HTML>
<html lang="es">
<head>
<title>Formulariohtml_proyectoguiado</title>
<meta charset=utf-8>
<link rel="stylesheet" type="text/css" href="resources/estilos.css"/>
<script language="javascript" type="text/javascript">
function capturaMOUSE(event)
{
return {
x:(window.event)?(window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft):(event.clientX + (window.scrollX || document.body.scrollLeft || 0)),
y:(window.event)?(window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop):(event.clientY + (window.scrollY || document.body.scrollTop ||0))
};
}
function muestra(id){
var posMOUSE=capturaMOUSE(arguments[4] || window.event);
var ex=document.getElementById(id);
ex.style.top=posMOUSE.y + "px";
ex.style.left=posMOUSE.x + "px";
if(ex.style.display=='block' or ){
ex.style.display='none';
} else{
ex.style.display='block';
}
}
</script>
</head>
<body onmousemove="position(event);">
<form method="post">
<label for="campoNombre">Nombre</label><br/>
<input type="text" id="campoNombre" name="campoNombre" value="" onMouseOver="muestra('exnom')"
onMouseOut="muestra('exnom')"/></br>
<label for="campoApellidos">Apellidos</label><br/>
<input type="text" id="campoApellidos" name="campoApellidos" value=""onmouseover="muestra('exape')"
onmouseout="muestra('exape')"/></br>
<label for="campoDNI">DNI</label><br/>
<input type="text" id="campoDNI" name="campoDNI" value="" onMouseOver="muestra('exdni')"
onMouseOut="muestra('exdni')"/></br>
<label for="campoEdad">Edad</label><br/>
<input type="text" id="campoEdad" name="campoEdad" value="" onMouseOver="muestra('exedad')"
onMouseOut="muestra('exedad')"/></br>
<label for="campoAvatar">Avatar</label><br/>
<input type="file" id="campoAvatar" name="campoAvatar" onMouseOver="muestra('exav')"
onMouseOut="muestra('exav')"/></br>
<label for="campoDomicilio">Domicilio</label><br/>
<input type="text" id="campoDomicilio" name="campoDomicilio" maxlength="200" onMouseOver="muestra('exdom')"
onMouseOut="muestra('exdom')"/></br>
<label for="campoProvincia">Provincia</label><br/>
<input list="provincias" type="text" id="campoProvincia" name="campoProvincia" value="" onMouseOver="muestra('exprov')"
onMouseOut="muestra('exprov')"/></br>
<label for="campoTelefono">Telefóno</label><br/>
<input type="text" id="campoTelefono" name="campoTelefono" value=""onMouseOver="muestra('extef')"
onMouseOut="muestra('extef')"/></br>
<label for="campoMail">Mail</label><br/>
<input type="text" id="campoMail" name="campoMail" value="" onMouseOver="muestra('exem')"
onMouseOut="muestra('exem')"/></br>
<label for="campoPassword">Contraseña</label><br/>
<input type="password" id="campoPassword" name="campoPassword" value="" onMouseOver="muestra('expass')"
onMouseOut="muestra('expass')"/></br>
<label for="campoComprobarPassword">Comprobación de Contraseña</label><br/>
<input type="password" id="campoComprobarPassword" name="campoComprobarPassword" value="" onMouseOver="muestra('excpass')"
onMouseOut="muestra('excpass')"/></br></br>
<input type="submit" value="Validar"/>
</form>
</div>
<div id="exnom" style="display:none;">El campo Nombre es obligatorio.</div>
<div id="exape" style="display:none;">El campo Apellidos es obligatorio.</div>
<div id="exdni" style="display:none;">El campo DNI es obligatorio. Debe contener 9 cáracteres,
8 números y una letra.</div>
<div id="exedad" style="display:none;">Este campo no es obligatorio. Deebe ser un valor numérico y estar
comprendido entre 1 y 120.</div>
<div id="exav" style="display:none;">Este campo no es obligatorio. Sera la imagen que te representará.</div>
<div id="exdom" style="display:none;">Este campo no es obligatorio. Máxima longitud: 200 carácteres.</div>
<div id="exprov" style="display:none;">Este campo no es obligatorio. Debe pertenecer a una de las listadas.</div>
<div id="extef" style="display:none;">Este campo no es obligatorio. Deebe ser un numero válido: 9XXXXXXXX ó 6XXXXXXXX.</div>
<div id="exem" style="display:none;">Este campo es obligatorio. Débe ser un email válido.</div>
<div id="expass" style="display:none;">Este campo es obligatorio. Se indica la fortaleza de tu contraseña, pero no hay requisitos.</div>
<div id="excpass" style="display:none;">Este campo es obligatorio. Repite la contraseña antes escrita, por favor.</div> Esta sin terminar, proque el resto son listas y cosas que no tienen importancia.