Usually I love mootools, really. Usually. I found CSS Guy’s form field hints posting inspiring, so I modified it to work with mootools. The result is something simple and easy.

$ES('div.hint').each(function(el) {
  new Element('div').addClass('hint-pointer').setHTML(' ').injectInside(el);
});
$each(document.forms, function(form) {
  $each($(form).getElementsBySelector('input, select'), function(input) {
    if($(input).getParent().getElementsByTagName('div')[0]) {
    $(input).addEvent('focus', function(e) {
      hint = $E('.hint', this.getParent());
      hint.setStyle('display', 'inline');
      hint.effect('opacity', {duration: 500, wait: false}).set(0).start(1);
    }.bind(input));
    $(input).addEvent('blur', function(e) {
      hint = $E('.hint', this.getParent());
      hint.effect('opacity', {duration: 500, wait: false}).set(1).start(0);
    }.bind(input));
    }
  });
});

I modified the CSS to suit my layouts better. You’ll notice above I am using divs instead of spans. I noticed IE6 would never hide the hints div ever again once it was diplayed. Fortunately the fade effect hides it for me.

.hint {
  display: none;
  position: absolute;
  right: 1em;
  border: 1px solid #c93;
  padding: 0.4em 0.5em;
  background-color: #ffc;
  font-size: 80%;
}
.hint .hint-pointer {
    position: absolute;
    left: -10px;
    top: 2px;
    width: 10px;
    height: 19px;
    background: url(/images/pointer.gif) left top no-repeat;
}

The mootools bonus: I can easily add a fade effect, which I did. I further simplified things by adding the hint-pointer div at render time with mootools instead of repeating the markup over and over again. A little DRY from Rubyland.

Yay.