The problem

Ideally your user interface design is intuitive and requires no explanation to use effectively. But sometimes, you need to provide a little help - for example, when presenting a complex tool suite or on a site targeted at non-technical users.
The problems this how-to article addresses are:

1. Help is only useful if it is right at hand - requiring a switch to a different page is laborious and can be confusing.
2. Help is generally only required once or twice - once a user gets the hang of it, they don't need it anymore.
3. Thus, Help needs to be handy - right there when needed - BUT it needs to be out of the way, so its not intrusive when not needed.

I could not find a decent way to provide this kind of unobtrusive, context-sensitive help built into Drupal or in any module, so I devised the following recipe to create a help block that "rolls up" when not needed, and so does not take up any valuable real estate.

Requirements

To use this recipe, you will need:

• to use a phptemplate theme;
• an ability to look at PHP code without cringing;
• an ability to write css styles;
• the JSTools Collpsiblock module installed;

The Recipe

1. First, we need to create a new "region" in our theme, where we will display the help block. See Regions in PHPTemplate - http://drupal.org/node/29139 for details. In summary, you'll need to edit three of your theme's files:
   • template.php to add the new region, "help_block", as follows:

     function yourTheme_regions() {
       return array(
            'page_top' => t('page top'),
            // ... other regions in your theme...
            'page_bottom' => t('page bottom'),
            'help_block' => t('help block')
       );
     }
     

   • page.tpl.php to add code to display this new region:

        <?php if ($help_block): ?>
          <div id="help-block">
           <?php print $help_block; ?>
          </div>
         <?php endif; ?> 
     

   • style.css to add the layout and styes for the new "help-block" div defined above:

     #help-block {
       postion:absolute;
       right:0;
       width:200px;
       z-index:1;
     }
     

     This is part of the "magic" - it positions the region on the right side of the page (position:absolute; right:0;) and "overlays" the block on top of "normal" content (z-index:1;). You should set the width to whatever makes sense for your layout.
     In addition, you may want to add styles for the .block, .titlewrap, .title, and .content classes to add padding, border, etc., to get your help block looking nice.

2. Next, we need to create a block to hold the help text. Go to admin/build/block and add a new block. Put "Help", or whatever in the title. Put your help text in the block body.
3. On the drop-down "region" beside your new help block, select "help block", so this block goes into the help_block region we created above.
4. Finally, configure the "Block Collapse Behavior" (remember, you need to have JSTools Collapsiblock enabled) to "Collapsible, collapsed by default"); and select "Show on only the listed pages", with the paths to the page(s) where you want the help block to appear.

Done. Now when you view that page, you should see a collapsed block showing just the title. Click on the block title and the block drops down over the content in your node to display the help text. Click again, the help rolls up. Nice.

Note: I have assumed you have an empty space in the top-right of your layout. This is true for many layouts, as it it opposite the node or view title. If this does not work for your layout, you will need to position the help block region to a suitable location in style.css

*** I'll add a link soon so you can see it in action. ****