Hola, lo ideal sería utilizar capas y las que contengan los divs de los mensajes ponerles una clase y todas estas position: relative. Luego en el css utilizas top,right,bottom,left según convenga, y así siempre se posicionarán en el sitio perfecto que tú les digas.
Aquí tienes el ejemplo:
Código HTML:
Ver original.Div1 {
width:183px;
height:51px;
background-color:#000;
border-radius:8px;
display:none;
color:#FFF;
position:absolute;
}
.Div2 {
width:183px;
height:51px;
background-color:#000;
border-radius:8px;
display:none;
color:#FFF;
position:absolute;
}
.Div3 {
width:183px;
height:51px;
background-color:#000;
border-radius:8px;
display:none;
color:#FFF;
position:absolute;
}
.Div1, .Div2, .Div3 { top: 0; right: 30px; }
.relat { position: relative;}
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){
$("#txtNombre").focus(function (){
$('.Div1').fadeIn();
})
$("#txtNombre").blur(function (){
$('.Div1').fadeOut();
})
$("#txtTelefono").focus(function (){
$('.Div2').fadeIn();
})
$("#txtTelefono").blur(function (){
$('.Div2').fadeOut();
})
$("#txtEmail").focus(function (){
$('.Div3').fadeIn();
})
$("#txtEmail").blur(function (){
$('.Div3').fadeOut();
})
})
<form id="form1" name="form1" method="post" action=""> <table width="30%" align="center"> <div class="relat"><input type="text" name="txtNombre" id="txtNombre" /><div class="Div1">Ingres su nombre
</div></div></td> <div class="relat"><input type="text" name="txtTelefono" id="txtTelefono" /><div class="Div2">Ingres su telefono
</div></div></td> <div class="relat"><input type="text" name="txtEmail" id="txtEmail" /><div class="Div3">Ingres su Email
</div></div></td> <td><input type="submit" name="button" id="button" value="Enviar" /></td>
Un saludo.