Answer to mike's question

In html, define only the structure. In jQuery, define all the helper effects such as this tooltip. I am using the <input> element's ID to act as the text for the placeholder text and balloon text. You could also/instead add separate parameters within the <input> element, such as perhaps a data-longtext parameter, which the jQuery could then insert into the balloon. See second solution:- http://jsfiddle.net/alano/UZLMY/ My solution works like this... wrap a <div> around each <input> to provide a solid positional reference container, then add a hidden tooltip balloon and arrow for each <input>. Set the <input> placeholder and balloon text to the value of the <input> element's ID. Finally, use .hover() to show/hide the tooltips as required. ---------------------- 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"/>
    <input id="Apellido" type="text"/>
    <input id="Razon" type="text"/>
</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 = $(this).attr('id');
        $(this).attr('placeholder',  tipo + '...');
        $(this).next().text(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