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:
Note that I've called this release 0.9 as I have yet to test it exhaustively. Please report any bugs through the comments.