Alguém sabe de algum tutorial que faça isso/?
Quando o input text do html receber o focus ele abre uma pequena janela (balão) com algum aviso por uns 2 segundos por exemplo…
Alguém sabe de algum tutorial que faça isso/?
Quando o input text do html receber o focus ele abre uma pequena janela (balão) com algum aviso por uns 2 segundos por exemplo…
[quote=robertorp]Alguém sabe de algum tutorial que faça isso/?
Quando o input text do html receber o focus ele abre uma pequena janela (balão) com algum aviso por uns 2 segundos por exemplo…[/quote]
Olá. Aqui está um exemplo básico de como fazer isso:
HTML
<body>
<input id="carName" placeholder="Digite aqui"/>
</body>
CSS
#balloon {
border-radius: 10px 10px 10px 0;
border: solid 1px rgb(32, 32, 32);
padding: 1px;
background-image: -moz-linear-gradient(bottom, rgb(248,248,224) 0%, rgb(255,255,128) 78%);
background-image: -webkit-linear-gradient(bottom, rgb(248,248,224) 0%, rgb(255,255,128) 78%);
background-image: linear-gradient(bottom, rgb(248,248,224) 0%, rgb(255,255,128) 78%);
}
JS
"use strict";
var inputCar = document.getElementById("carName");
function showBalloon() {
var balloon = document.createElement("span");
var bText = document.createTextNode("Digite a marca e modelo do seu carro");
balloon.appendChild(bText);
balloon.id = "balloon";
//inputCar.appendChild(balloon);
carName.parentNode.insertBefore(balloon, carName.nextSibling);
}
function hideBalloon(){
var balloon = document.getElementById("balloon");
balloon.parentNode.removeChild(balloon);
}
inputCar.addEventListener("focus",showBalloon,false);
inputCar.addEventListener("blur",hideBalloon,false);
No caso do tempo que vc citou de 2s, é só usar o setTimeOut. Dá tam,bém pra usar transição no balão, pra ele aparecer e desaparecer gradualemente.