Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Tooltip insertado por innerHTML no funciona

Estas en el tema de Tooltip insertado por innerHTML no funciona en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 03/06/2011, 02:10
Avatar de granbosteron  
Fecha de Ingreso: agosto-2004
Mensajes: 164
Antigüedad: 16 años, 1 mes
Puntos: 1
Tooltip insertado por innerHTML no funciona

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
  1. <script language="javascript">
  2. $(document).ready(function(){
  3.                            
  4.         //LOGIN                
  5.         $("#form_login").submit(function(){  
  6.                                          
  7.                 var to=document.getElementById("user_error");
  8.                 if(!$("#user").val()){
  9.                     to.innerHTML="<a href='' class='tip_trigger'><img src='images/icoform_error.png' border='0'><span class='tip'>Ingrese Nombre de usuario!</span></a>";
  10.                     $("#user").focus();
  11.                     return (false);
  12.                 }
  13.         });
  14.  
  15.        
  16.        
  17.     });
  18.  
  19.  
  20.     <form action="index.php" method="post" class="validate-form form" id="form_login">
  21.         <div class="row clear">
  22.             <label for="user">Usuario:</label>
  23.             <input name="user" id="user" type="text" value="" class="text">
  24.             <span id="user_error"></span>
  25.          </div>
  26.     </form>
  27.    
  28.     <a href='' class='tip_trigger'><img src='images/icoform_error.png' border='0'><span class='tip'>Ingrese Nombre de usuario!</span></a>
  29. </body>
  30. </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
__________________
Saludos :adios: :adios: :adios:

Etiquetas: ajax, innerhtml, insertado, tooltip
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:52.