Form tips with jquery or other library

Question

This is a form validation for jquery:

http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

I need something like that but the tips has to appear when I select the input text form by clicking on it and has to dissapear when I select another input text form.

Is there a way to do this with jquery, mootools, scriptaculus or any other library ?

Thanks ^_^

Answer 1

In jquery, I'd do something like this:

$('input').focus(function(){
  $(this).sibling('div.form_tooltip').show();
});
$('input').blur(function(){
  $(this).sibling('div.form_tooltip').hide();
});

corresponding html:

<div class="form_input">
  <label for="..">label</label>
  <input type="text" name="" id="" value="" />
  <div class="form_tooltip" style="display: none;">
    Here goes the html that appears in the tooltip, you probably want this div to be positioned relatively to the div.form_input.
  </div>
</div>