Question

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 anyone suggest an easy way to implement that?

Answer 1

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.