Tooltip - informazioni compilazione campi

spacca!  0 scarso!  0 versione stampa invia per email scheda utente totale visite  728
Piccolo script per visualizzare un box informazioni a fianco di un campo di tipo testo[n]
[n]
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;
    }
 
 

Inserisci un commento

non sei loggato

CAPTCHA