Answer to mike's question - expanded

This expanded version of solution makes use of data fields and the new HTML5 <input. tags such as telephone, email and date. Date, for example, pops up a calendar. ---------------------- In answer to:- https://forum.jquery.com/topic/hello-friends-i-need-a-better-way-to-shorten-code-please

by alano

HTML

<section id="seleccion">
    <input id="Nombre" type="text" maxlength="20" 
        data-prompt="Enter first name..." 
        data-tooltip="First name, less than 20 characters" />
    <input id="Apellido" type="text" maxlength="20" 
        data-prompt="Enter surname..." 
        data-tooltip="Surname, less than 20 characters" />
    <input id="Razon" type="text" maxlength="20" 
        data-prompt="Enter reason..." 
        data-tooltip="Reason, less than 20 characters" />
    <input id="Telefono" type="tel" />
    <input id="Buzon" type="email" maxlength="30" 
        data-prompt="Enter email address..." 
        data-tooltip="Email address, less than 30 characters" />
    <input id="DOB" type="date" 
    data-prompt="Enter date of birth..." 
        data-tooltip="Enter date of birth DD/MM/YYYY" />
</section>

CSS

section#seleccion {
    font-family: sans-serif;
    font-size: 15px;
    padding-top: 50px;
}
#seleccion input {
    min-width: 128px;
    height: 13px;
    color: Black;
    background-color: White;
    padding: 3px 0 7px 4px;
    border: 3px solid #CCC;  
    margin: 20px 0 0 20px;
}
/* tooltip container..... */
#seleccion div.tip { position: relative; }
/* tooltip baloon and arrow...... */
#seleccion input ~ div {
    display: none;
    position: absolute;
    font-family: sans-serif;
    font-size: 15px;
}
/* tooltip baloon...... */
#seleccion input + div {
    height: 23px;
    text-align:center;
    padding: 4px 10px 0 10px;
    width: auto;
    border-radius: 5px;
    border: #F00 solid 2px;
    top: -23px;
    left: 50px;
    min-width: 40px;
    background-color: Black;
    color: White;    
}
/* tooltip arrow......... */
#seleccion input + div + div {
    top: 2px;
    left: 60px; 
    color: Black;
}

JavaScript

$(document).ready(function () {

    //tooltip helper...
    $('#seleccion input')
        .wrap('<div class="tip"/>')
        .after('<div/><div>▼</div>');
    $('#seleccion input').each(function(i, el) {
        var tipo = $(el).attr('id');
        $(el).attr('placeholder', 
             $(el).data('prompt') || tipo);
        $(el).next()
            .text($(el).data('tooltip') || tipo);
    });
    $('#seleccion input').hover(function() {
        $(this).siblings().fadeToggle('fast'); 
    });
     
});

//read the Info panel in left menu of JSFiddle to view helpful information about the implementation of this solution