JavaScript - poner tooltip cerca de su correspondiente input

   
Vista:

poner tooltip cerca de su correspondiente input

Publicado por Sam (95 intervenciones) el 22/01/2015 17:31:39
Hola amigos, veran tengo el siguiente codigo que me va muy bien para mostrar tooltips

el problema es que necesito que el tooltip cuando aparezca, esté junto al input en cuestion por el que se le pase

el cursor por encima en ese momento.

Y eso es lo que no se hacer. :-(

Gracias de antemano.



<style>

#tooltip {

background:#000;
width:150px;
heigth:30px;
color:#ffffff;
border-radius:10px;
}

</style>

<input class="inputHover" name="nombre" id="nombre" type="text" placeholder="nombre" />

<input class="inputHover" name="apellido" id="apellido" type="text" placeholder="apellido" />



<div id="tooltip" align="center"></div>



<script type="text/javascript">

var allInputs = document.getElementsByTagName('input');

for (var a = 0; a < allInputs.length; a++) {

if (allInputs[a].className == 'inputHover') {

allInputs[a].onmouseover = function() {
var mensaje = "Este es el " + this.id;

document.getElementById("tooltip").innerHTML = mensaje;
document.getElementById('tooltip').style.display = 'block';
}

allInputs[a].onmouseout = function() {
document.getElementById('tooltip').style.display = 'none';
}
}
}
</script>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder