rails 3, easiest way to implement 'popup help' for form fields

for our rails 3 app, hosted at heroku, using haml (but not compass or anything like that):

when our users fill out forms we'd like to find an easy to implement 'popup' box for each field that explains what goes in it. doesnt have to be fancy, but should allow arbitraryly large multi-line popup boxes containing from 20 to 100 words

'popup' could also mean some type of "unfolding" or "expanding" div tag below the field, but a true popup-over-the-page would be ideal.

can anyon开发者_高级运维e suggest an easy way to implement that?

---

The simplest way I can think about is using a facebox link inside or right after your input field label, that points to a hidden div with the help info that you want:

<label for="name">Name: <a href="#name-help" rel="facebox">?</a></label>
<input type="text" name="name" ... />
<div id="name-help" style="display: none;">
  <p>This is the help text for <strong>name</strong></p>
  <p>You can put any html here</p>.
</div>

You can put the help divs right after the inputs, or at the end of the document; they will make no difference.

---

I've always used JQuery Overlay. It's fairly easy to setup and really easy to implement:

<a href="#overlay" rel="#overlay" class="overlayLink">

<div id="overlay">
  content of your help
</div>

Then in your Javascript (assuming you're using jQuery

$('.overlayLink').overlay()

---

I use JQuery-ui dialog boxes on my form - works quite well with a range of different overlay actions (http://jqueryui.com/demos/dialog/). The layout is similar to what egarica mentions above with a display: none div holding the help info (mine are just placed above the rest of the form) and a clickable span next to the form element to open the specific help div.

<script>
 document.observe('dom:loaded',function(){         
    $j(function() {
                  $j("#dialog_postcode").dialog({
                autoOpen: false,
                show: "blind",
                hide: "explode"
           });

           $j("#opener_postcode").click(function() {
                $j("#dialog_postcode").dialog("open");
                return false;
           });
       });

});
 </script>

<div id="dialog_postcode" title="Postcode information">
    <fieldset>
        <legend>Postcodes</legend>
        <p>Postcodes are looked up on a static database table.</p>          
    </fieldset>
</div>

//dialog opener placed by relevant element
<span id="opener_postcode" class="help" title="Postcode information">?</span>

---

In Rails 5.0:

<%= submit_tag "Help", :type => 'button', :onclick => 'alert("If Zipcode is missing in list at left, do: \n\n\ 1. Enter any zipcode and click Create Client. \n\ 2. Goto Zipcodes and create new zip code. \n\ 3. Edit this new client from the client list.\n\ 4. Select the new zipcode ")' %>

This posts a js dialog without submitting as a form post.