About

A jQuery plugin that overlays input labels as hints to a form. It uses the title tags on each input/textarea as the label values/hints. It is called it on the form (or any parent).

$(form).inputHintOverlay()

Why use title tags? This makes it play nice with pre-filling forms from cookies (if a value is specified, the hint goes away).

Why use overlay instead of setting the value? This allows validation to work correctly and prevents the user from accidently submiting erroneous data.

Arguments to this method are adjustments to top and left of the fixed position of each overlay div. The folling would push each hint down 2px and right 5px.

$(form).inputHintOverlay(2, 5)

The class .inputHintOverlay can be used to style the hints.

Download

• jquery.inputHintOverlay.js (v1.1.14)
• GitHub repository
• jQuery plugin page

Known Issues

• Fails when multiple items have the same title
  • Fix coming soon
• Incorrectly positions the overlays when the input elements are floated
  • Not-so-elegant fix: Rather than floating the inputs, wrap each in its own floated block-level element. This will fix the problem.
  • I think this problem stems from how jQuery gets the position of floated elements. I'm not sure how to fix it just yet.
• Label fails to clear itself when you click directly on it
  • You can fix it this by added a click function to each label that hides it and triggers focus on the input box.
  • This will be fixed in the next release
• Different positioning in Chrome
  • I've noticed that the labels sometimes have slightly different position in Chrome. Usually small, acceptable differences but I'm not sure what causes them
• Find another bug? Please email me and let me know. Same goes for feature requests

Compatibility

• This is known to work with jQuery 1.4.x
• It should work just fine with earlier versions, but YMMV
• Creates fully valid XHMTL 1.0 Strict
• This also plays nicely with the jqTransform plugin and the jQuery Validation plugin (although you have to disable the Validation feature that uses input title attributes as an error message override)

Code

Just create a form and call the inputHintOverlay method on it. The title tag of each input will be used as the hint. Hints can be stylized using the div.inputHintOverlay class

<script type="text/javascript">
    $(document).ready(function() {
        $("form#test").inputHintOverlay(5, 6);
    });
</script>

<style type="text/css">
    .inputHintOverlay { color: #999; font-size: 12px; }
</style>

<form id="test" action="submitPage.php">
    <fieldset>
        <input type="text" id="name" title="Full Name" />
        <input type="text" id="email" title="E-Mail" />
        <textarea id="comment" title="Comment" cols="10" rows="5"></textarea>
        <input type="button" value="Submit" />
    </fieldset>
</form>