Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

guihh25

[AJUDA] Tooltip JQuery

Por , em Javascript

Recommended Posts

guihh25    0

guihh25
Postado

Olá Pessoal,

 

Estou tentando implementar um tooltip no meu sistema de cadastro. Os códigos eu achei na internet e não estou conseguindo modificar para que fique de acordo com o que eu preciso.

 

O código está abaixo. Veja que ao clicar na input nome, o tooltip aparece no lado direito. Eu gostaria que ele aparecesse no lado esquerdo do input.

 

Alguém poderia dar uma luz para arrumar isso. A parte do formulário ele tem uns style mas não coloquei.

 

Código HTML onde já contem o script

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Teste</title>

<link href="style.css" rel="stylesheet" type="text/css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

</head>

<body>



<section id="main">                         
    
    	<section id="main_wrapper">
        
        	<br><br><br>
    		<div id="register">
    		<div id="register_wrapper">
        
        	<input type="text" name="firstname" id="firstname" value="" placeholder="Nome">
					
					<input type="text" name="lastname" id="lastname" value=""   placeholder="Sobrenome"><br />
					
					<input type="email" name="email" id="email" value=""  min="3" placeholder="E-mail">
					
					<input type="email" name="checkemail" id="checkemail" value="" placeholder="Confirmar E-mail">
					
					<input type="password" name="password" id="password" value="" placeholder="Nova senha"><br />
            
           
        	</div>
	        </div>          
        
        </section>
        
       <!-- First name validation --> 
        
     <script>

    "use strict";
	var inputTooltip = document.getElementById("firstname");
	function showBalloon() {
    var balloon = document.createElement("span");
    var bText = document.createTextNode("Seu nome deve conter pelo menos 2 letras.");
    balloon.appendChild(bText);
    balloon.id = "balloon";
    //inputCar.appendChild(balloon);
    firstname.parentNode.insertBefore(balloon, firstname.nextSibling);
	}
	function hideBalloon(){
    var balloon = document.getElementById("balloon");
    balloon.parentNode.removeChild(balloon);
	}
	inputTooltip.addEventListener("focus",showBalloon,false);
	inputTooltip.addEventListener("blur",hideBalloon,false);

</script>

<!-- Last name validation -->

<script>

    "use strict";
	var inputTooltip = document.getElementById("lastname");
	function showBalloon() {
    var balloon = document.createElement("span");
    var bText = document.createTextNode("Seu nome deve conter pelo menos 2 letras.");
    balloon.appendChild(bText);
    balloon.id = "balloon";
    //inputCar.appendChild(balloon);
    lastname.parentNode.insertBefore(balloon, lastname.nextSibling);
	}
	function hideBalloon(){
    var balloon = document.getElementById("balloon");
    balloon.parentNode.removeChild(balloon);
	}
	inputTooltip.addEventListener("focus",showBalloon,false);
	inputTooltip.addEventListener("blur",hideBalloon,false);

</script>

<!-- E-mail validation -->

<script>

    "use strict";
	var inputTooltip = document.getElementById("email");
	function showBalloon() {
    var balloon = document.createElement("span");
    var bText = document.createTextNode("Coloque um e-mail válido.");
    balloon.appendChild(bText);
    balloon.id = "balloon";
    //inputCar.appendChild(balloon);
    email.parentNode.insertBefore(balloon, email.nextSibling);
	}
	function hideBalloon(){
    var balloon = document.getElementById("balloon");
    balloon.parentNode.removeChild(balloon);
	}
	inputTooltip.addEventListener("focus",showBalloon,false);
	inputTooltip.addEventListener("blur",hideBalloon,false);

</script>



  
    
</section>

  
   




</body>
</html>

Código CSS

@charset "utf-8";
/* CSS Document */


#main{		
	
	
	background-color:#fff;
	background-size:cover;
	min-width:1000px;
	height:700px;
	background-image:url(../_images/background.jpg);
		
}

#main_wrapper{

	width: 1000px;
	height:700px;
	margin:auto;
	position:relative;

}


#register{
	
	width:410px;
	height:540px;
	position:relative;
	margin:auto;	
	background-color:rgba(39, 39, 39, 0.95);
	border-radius: 5px;
}
	
#register_wrapper{
	
	width:385px;
	height:550px;
	position:relative;
	border-radius:6px;
	border-color:#2a2c2f;
	
}

#balloon {
	
	position:absolute;	
	width: 250px; 
	height:20px;	
	background-color: rgba(66,66,66,0.90);	
	border: dotted 1px rgba(0,146,207,0.95);
	font-family:Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif;
	color:#FFFFFF; 
	font-size:12px;	
    border-radius: 5px 5px 5px 5px;
	padding-top:7px;
	padding-bottom:7px;
	text-align:center;
	margin-left: 5px;
	
    
    
    
}

Obrigado

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito