Postagens
Male
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
