Add help tips next to a field?

You can do this, but it's gonna take a few steps.

Gravity Forms uses the "qtip" tooltip library. If you like that one and want to use it, here's how. You'll want to start by downloading the library, and uploading it to your theme directory. In this example, I'll assume you uploaded it to the /js directory

http://craigsworks.com/projects/qtip/download/

Next, you'll have to add the script to your page and initialize it. I like to use the attribute option to invoke the tooltip and to use a custom style. How you choose to implement and style the script is up to you.. there are tons of options, all of which you can find documented on their site.

http://craigsworks.com/projects/qtip/docs/

Here's what I've added to my page header. You want to make sure that this is placed AFTER the actual jQuery library is called/enqueued in your page or it won't work properly.

<!-- add some tooltip goodness -->

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.qtip-1.0.0-rc3.min.js"></script>

<script type="text/javascript">
//initilaize the tooltips
jQuery.fn.qtip.styles.mytipstyle = { // Last part is the name of the style
   width: 275,
   background: '#F1F1F1',
   color: '#424242',
   textAlign: 'left',
   border: { width: 3, radius: 6, color: '#AAAAAA' },
   tip: 'bottomLeft'
}

// Create the tooltips only on document load
jQuery(document).ready(function()
{
   // Notice the use of the each() method to acquire access to each elements attributes
   jQuery('.tooltip').each(function()
   {

       jQuery(this).qtip({
         content: jQuery(this).attr('tooltip'), // Use the tooltip attribute of the element for the content
         show: { delay: 200, solo: true },
         hide: { when: 'mouseout', fixed: true, delay: 200, effect: 'fade' },
         style: 'mytipstyle', // custom tooltip style
         position: {
      		corner: {
         		target: 'topRight'
                ,tooltip: 'bottomLeft'
      		}
  		 }
      });
   });
});

</script>

<style type="text/css">
.qtip{min-width:100px}
.qtip-content{line-height:130%; margin:8px}
.qtip-content h6{font-weight:bold; font-size:14px; color:#21759B; margin:0 0 2px 0; padding:0}
</style>

<!-- end tooltips -->

Now, you can add a tooltip to your description with a little HTML markup like this..

[html]
help <a class="tooltip" href="javascript:void(0);" tooltip="<h6>Comments</h6>Please leave detailed comments about your project so we can quote it accurately"><img src="http://www.mysite.com/wp-content/themes/mytheme/images/icon-question.png"></a>

Note: you have to have the class="tooltip" applied to your link so the script will know to render the content of the "tooltip" attribute.

screenshot - tooltips in description

Now, if you want to put the tooltips in the actual field labels, you'll have to insert those with some additional jQuery. You'll need to view the source and get the id's of the fields, then add them like this.

<script type="text/javascript">
 jQuery.noConflict();
   jQuery(document).ready(function($) {

      $('#field_1_5 label').html('Comments <a href="javascript:void(0);" class="tooltip" tooltip="<h6>Comments</h6>Please leave detailed comments about your project so we can quote it accurately"><img src="<?php bloginfo('template_directory'); ?>/images/icon-question.png"></a>');

   });
</script>

Important Note: You will have to put these statements BEFORE the tooltips are initialized so this will work properly.

screenshot - tooltips with labels

So, here's the complete block of code with everything for the labels, etc.

<!-- add some tooltip goodness -->

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.qtip-1.0.0-rc3.min.js"></script>

<script type="text/javascript">
 jQuery.noConflict();
   jQuery(document).ready(function($) {

      $('#field_1_2 label').html('Email <a href="javascript:void(0);" class="tooltip" tooltip="<h6>Email</h6>Please leave your email address so we can reply to your inquiry"><img src="<?php bloginfo('template_directory'); ?>/images/icon-question.png"></a>');

      $('#field_1_5 label').html('Comments <a href="javascript:void(0);" class="tooltip" tooltip="<h6>Comments</h6>Please leave detailed comments about your project so we can quote it accurately"><img src="<?php bloginfo('template_directory'); ?>/images/icon-question.png"></a>');

   });
</script>

<script type="text/javascript">
//initilaize the tooltips

jQuery.fn.qtip.styles.mytipstyle = { // Last part is the name of the style
   width: 275,
   background: '#F1F1F1',
   color: '#424242',
   textAlign: 'left',
   border: { width: 3, radius: 6, color: '#AAAAAA' },
   tip: 'bottomLeft'
}

// Create the tooltips only on document load
jQuery(document).ready(function()
{
   // Notice the use of the each() method to acquire access to each elements attributes
   jQuery('.tooltip').each(function()
   {

       jQuery(this).qtip({
         content: jQuery(this).attr('tooltip'), // Use the tooltip attribute of the element for the content
         show: { delay: 200, solo: true },
         hide: { when: 'mouseout', fixed: true, delay: 200, effect: 'fade' },
         style: 'mytipstyle', // custom tooltip style
         position: {
      		corner: {
         		target: 'topRight'
                ,tooltip: 'bottomLeft'
      		}
  		 }
      });
   });
});

</script>

<style type="text/css">
.qtip{min-width:100px}
.qtip-content{line-height:130%; margin:8px}
.qtip-content h6{font-weight:bold; font-size:14px; color:#21759B; margin:0 0 2px 0; padding:0}
</style>

<!-- end tooltips -->

http://pastie.org/1039756

Of course you can tidy up the jQuery or place it in a remote file, move the styles to your style sheet, or whatever you prefer to keep things better organized but this should get you pointed in the right direction.