HintText

Hint text or hint labels for form inputs. Prototype-based, fully-spec’d, semantically correct, and cross-browser compliant. Based on this A List Apart article

Usage

HTML

HintText will search for all labels with the class hint that reference an input. It then changes the class to hint-apply, and takes care of all the other heavy lifting.

<script type="text/javascript">
  Event.observe(window, "load", function() {
    var hint = new HintText();
  });
</script>
...
<form action="#" method="post">
  <div class="field">
    <label class="hint" for="username">
      Username
    </label>
    <input type="text" name="username" id="username" size="30" />
  </div>
</form>

CSS

Technically speaking you only need the following styles, but feel free to pretty-up your forms:

.field { /* This is the label & input container */
  position: relative;
}

label.hint-apply {
  position: absolute;
  top: 6px;
  left: 5px;
  z-index: 1;
}

It’s important that there is a container that is relatively positioned, and the hint must be absolutely positioned. If you’d like to know why please read the ALA article.

Reusability

Let’s say you have some AJAX sexyness that inserts some form inputs with hint text, what do you do!? Easy, you just tell prototype to automagically initialze new HintText after each XHR request:

<script type="text/javascript">
  Event.observe(window, "load", function() {
    window["hints"] = new HintText();
  });
  
  Ajax.Responders.register({
    onComplete: function() {
      if (window['hints']) window['hints'].initializeElements();
    }
  });
</script>

Examples

See the examples/ directory.

To see HintText in action, check out GigPark.

Author

Written by Gianni Chiappetta – Runlevel6

Credits

Thanks for the wonderful article on ALA by Mike Brittain

Thanks to GigPark for allowing me to release this!