Tooltip insertado por innerHTML no funciona

[granbosteron]

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:

<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);
                }
        });
 
        
        
    });
</script>
 
 
    <form action="index.php" method="post" class="validate-form form" id="form_login">
        <div class="row clear">
            <label for="user">Usuario:</label>
            <input name="user" id="user" type="text" value="" class="text">
            <span id="user_error"></span>
         </div>
    </form>
    
    <a href='' class='tip_trigger'><img src='images/icoform_error.png' border='0'><span class='tip'>Ingrese Nombre de usuario!</span></a>
</body>
</html>
 

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