Supporting text for an Input field

Hidden DIVs appear next to an INPUT box to display directions on what should be entered in the INPUT

by webdevem

HTML

<fieldset>
   <legend>Example Textboxes</legend>
    <label>Enter Text - <input id="myText" type="text" /> (required)</label><br>
<div id="myTT">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. c, tempus nec, condimentum ac, tellus. Morbi pellentesque, libero sit amet porta accumsan, dolor orci mollis ipsum, sagittis dictum leo odio eleifend sapien. </div>

<label>Even More Text - <input id="myText2" type="text" /></label>
<div id="myTT2">Morbi facilisis. Quisque vehicula. Morbi gravida quam nec dui. Donec convallis, sem vel luctus scelerisque, diam sapien laoreet tellus, eu condimentum sapien elit ac turpis. Sed eget neque.</div>
</fieldset>
<hr>
Why use labels?  See <a href="http://jsfiddle.net/webdevem/vuVwS/" target="blank">http://jsfiddle.net/webdevem/vuVwS/</a>

CSS

#myTT, #myTT2 {
 display: none;
 border: 1px solid #000;
 background-color: #baf; 
 padding: 10px;    
 width: 200px;
 position: absolute;
 margin-left: 10px;
}
#myText2 {margin-top: 20px; margin-left: 20px;}

JavaScript

// Simpler version that positions the DIV based on the location of the 
// input that called it 
$('#myText').focus(function() {
    var tBoxPos = $(this).position();
    $('#myTT').css("top", tBoxPos.top + 'px').css("left", tBoxPos.left + $(this).innerWidth()  + 'px').show(300);
});
$('#myText').blur(function() {
    $('#myTT').hide();
});



// This one takes into account the margin-top applied to myText2 and
// adjusts accordingly.
// Also uses "fold" effect from jQuery UI library to animate nicer
$('#myText2').focus(function() {
    var tBoxPos = $(this).position();
    var tipTop = tBoxPos.top + parseFloat($(this).css("margin-top")) + 'px';
    var tipLeft = tBoxPos.left + parseFloat($(this).css("margin-left")) + $(this).innerWidth() + 'px';

    $('#myTT2').css("top", tipTop).css("left", tipLeft).show("fold", 500);
});

$('#myText2').blur(function() {
    $('#myTT2').hide();
});