Piccolo script per visualizzare un box informazioni a fianco di un campo di tipo testo.
Richiamo la libreria Jquery
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
La funzione javascript
$(document).ready(function(){
$("input[type='text']").focus(function(){
$(".tooltip").hide();
$(this).next().show();
});
});
l'html del form
<form>
<label>Username : </label>
<input type="text" name="user"/>
<span class="tooltip">
Indicazioni sulla scelta dell'user : <br/>
Lunghezza minima 8 caratteri . <br/>
Almeno due caratteri numerici . <br/>
</span>
<br/>
<label>Password : </label>
<input type="text" name="pass"/>
<span class="tooltip">
Indicazioni sulla scelta della password : <br/>
Lunghezza minima 8 caratteri . <br/>
Almeno due caratteri numerici . <br/>
Almeno un carattere speciale . <br/>
</span>
<br/>
<label>Ripeti password : </label>
<input type="text" name="rpass"/>
<span></span><!-- nessun tooltip -->
<br/>
<label>Telefono : </label>
<input type="text" name="tel"/>
<span class="tooltip">
Solo caratteri numerici
</span>
<br/>
</form>
Ultimo ma non meno importante il codice css
form {
line-height: 28px;
}
form label {
display: inline-block;
width: 120px;
text-align: right;
margin-right:5px;
}
span.tooltip {
display: none;
position: absolute;
width: 180px;
overflow: hidden;
text-align: left;;
color: #4A4F59;
background-color: #F5F5F5;
border-radius:4px;
border:1px solid #E1E1E1;
padding:6px;
margin-left:5px;
font-size:.8em;
color:#777;
}