Hint text the right way.
Latest commit d67b38a Mar 18, 2009 @gf3 Updated to be a little bit less brittle. Also added a workaround for …
…what seems to be either an IE8 bug, or an IE8/Prototype issue.



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



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();
<form action="#" method="post">
  <div class="field">
    <label class="hint" for="username">
    <input type="text" name="username" id="username" size="30" />


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.


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();
    onComplete: function() {
      if (window['hints']) window['hints'].initializeElements();


See the examples/ directory.

To see HintText in action, check out GigPark.


Written by Gianni Chiappetta – Runlevel6


Thanks for the wonderful article on ALA by Mike Brittain

Thanks to GigPark for allowing me to release this!