Condensing Forms with Help Icons
February 4th, 2010
A project I'm currently working to clean up a bit has some lengthy forms in it. They're already broken up a bit with CCK Fieldgroup Tabs, but I wanted to trim them down a bit further.
By theming the form elements, we can take the description of a field and use it as the title attribute of a small 
image attached to the field. Then the user can hover over that to see the description, but it takes up much less vertical screen real estate.
Before:
After:
Insert this bit of code in our theme's version of theme_form_element() before $output .= " $value\n";:
<?php
// these are the fields types we want to affect
static $rework = array(
'select' => 'select',
'textfield' => 'textfield',
'checkbox' => 'checkbox',
);
// a few quick searches suggested 128 is a good maximum length
// for image titles. anything longer may get chopped in some
// browsers.
if ($element['#description'] && $rework[$element['#type']] && drupal_strlen($element['#description']) < 128) {
// this is a slight drawback -
// we can't present HTML inside the titles
$description = strip_tags($element['#description']);
$value .= ' '. theme_image(path_to_theme() .'/images/help.png', $description, $description, array('class' => 'helpicon'));
unset($element['#description']);
}
?>I had to add a bit of css to get the icon to line up nicely with the fields:
.helpicon {
margin: -3px 0;
}I didn't narrow this down to just node fields on this site, and I'm rather enjoying the effect it has had on some of the administration screens.
I've attached the help icon that I'm using.
| Attachment | Size |
|---|---|
| help.png | 408 bytes |