Buenas gente.
Tengo un tooltip mediante jquery que funciona a la perfeccion. Pero que al insertarlo mediante innerHTML no me funciona. Podrian decirme que estoy haciendo mal!
este es el codigo HTML
Código HTML:
Ver original<script language="javascript"> $(document).ready(function(){
//LOGIN
$("#form_login").submit(function(){
var to=document.getElementById("user_error");
if(!$("#user").val()){
to.innerHTML="
<a href='' class='tip_trigger'><img src='images/icoform_error.png' border='0'><span class='tip'>Ingrese Nombre de usuario!
</span></a>";
$("#user").focus();
return (false);
}
});
});
<form action="index.php" method="post" class="validate-form form" id="form_login"> <input name="user" id="user" type="text" value="" class="text">
<a href='' class='tip_trigger'><img src='images/icoform_error.png' border='0'><span class='tip'>Ingrese Nombre de usuario!
</span></a>
este es el JS del tooltip
Código HTML:
$(document).ready(function() {
//Tooltips
$(".tip_trigger").hover(function(){
tip = $(this).find('.tip');
tip.show(); //Show tooltip
}, function() {
tip.hide(); //Hide tooltip
}).mousemove(function(e) {
var mousex = e.pageX + 10; //Get X coodrinates
var mousey = e.pageY - 50; //Get Y coordinates
var tipWidth = tip.width(); //Find width of tooltip
var tipHeight = tip.height(); //Find height of tooltip
//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
//Distance of element from the bottom of viewport
var tipVisY = $(window).height() - (mousey + tipHeight);
if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
mousex = e.pageX - tipWidth - 20;
} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
mousey = e.pageY - tipHeight - 20;
}
tip.css({ top: mousey, left: mousex });
});
});
El tooltip que esta debajo de la etiqueta </form> funciona a la perfeccion.
Por que no funciona al ser insertado mediante java "innerHTML" ? es porque no lo encuentra? ya que no esta creado desde un principio?
La idea de esta validacion del formulario, es que si no ingresa un nombre de usuario, a la derecha del input text del usuario, aparazca solo la imagen con un icono de error y al pasar por encima con el mouse, te muestre el error en el tooltip, por ejemplo "debe ingresar nombre de usuario".
Espero se entienda lo que busco y me digan si hay solucion a esto o algun ejemplo hecho en JQUERY que haga lo que estoy buscando.

gracias