When creating Wiretap, I wanted some kind of inline help system which would not only help users but would not detract from the layout of the form. I've seen lots of systems where there's a little question mark next to the form elements, or where there is a big lump of text underneath every box. So I wanted mine to be unobtrusive and flexible.
FormHints is the reusable version of the Wiretap help system. You add a class to your form element, then create a div with a specific id to link it to the form element. You can fill the div with any HTML you like, and when the form element gets focus, a bubble will pop up containing the contents of the div, styled into a curvy transparent thing of beauty. A demo shows it off better than I can describe it.
Now, there is a two-step process to setting up a formhint. Firstly, add a class of "hasHint" to the form element you which to give a hint to:
<label>
First Name: <input name="firstname" class="hasHint" />
</label>Secondly, add a div anywhere on your page with an id of hint-FORMELEMENTNAME, where FORMELEMENTNAME is the value of the name attribute of the form element from the previous step:
<label>
First Name: <input name="firstname" class="hasHint" />
<div id="hint-firstname">
<p>hello test!!</p>
<img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" />
</div>
</label>The inner content of this div will be included in your form hint, so you can have images or links or tables, pretty much anything. You can download FormHints here:
FormHints - A Javascript Help System
Note that I've called this release 0.9 as I have yet to test it exhaustively. Please report any bugs through the comments.