PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Add help tips next to a field?

  1. David
    Member

    Any suggestions for the best way to add "help tips" next to a field? e.g. like the help icon (?) that you see next to each field when you are building a gravity form.

    Posted 9 years ago on Sunday July 11, 2010 | Permalink
  2. I'm not sure of an easy way to do it. The only thing I could think of is using jQuery and it would probably be pretty involved to pull off.

    Posted 9 years ago on Sunday July 11, 2010 | Permalink
  3. 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.

    Posted 9 years ago on Sunday July 11, 2010 | Permalink
  4. David
    Member

    sweeeeeet.
    great support !

    Posted 9 years ago on Wednesday July 14, 2010 | Permalink
  5. I Do everything you say but it does not work.
    i want to know
    "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."

    it mean \wp-content\themes\rt_quantive_wp\header.php

    help me please

    Posted 8 years ago on Friday April 22, 2011 | Permalink
  6. Assuming that you already have the core jQuery library called/enqueued in your header, you should be able to put that block of code just before the </ head> tag and it should work.

    Posted 8 years ago on Friday April 22, 2011 | Permalink
  7. isuk
    Member

    Great explanation, Kevin, thanks a lot for this little tutorial!

    One question: Is it possible to place the question mark at the right end of a field?

    Two screenshot:

    1. This is how it looks like, when I have copied and pasted your code block.
    http://img52.imageshack.us/i/x000.jpg/

    2. This is how I'd like it to look like.
    http://img88.imageshack.us/i/x001.jpg/

    Tia,
    Isuk

    Posted 8 years ago on Sunday April 24, 2011 | Permalink
  8. You would have to modify the jQuery snippet above that adds the link to the label so it writes the link out after the input instead.

    http://api.jquery.com/after/

    Posted 8 years ago on Sunday April 24, 2011 | Permalink
  9. isuk
    Member

    Sorry, but I'm unsure how to do that ;(

    Can you provide a small example for any of the two tooltip entries in your example script?

    Thanks,
    isuk

    Posted 8 years ago on Sunday April 24, 2011 | Permalink
  10. You would want to change the script portion above to something like this.. it places the help link/icon directly after your input.

    Of course, you'll need to get the actual ID of your input from your markup and replace that portion in the script. (replace "input#input_77_5" with "input#input_XX_X" wher the "input_XX_X" is your actual ID)

    http://pastie.org/1831941

    test screenshot: http://grab.by/9XGr

    Posted 8 years ago on Monday April 25, 2011 | Permalink
  11. isuk
    Member

    Thank you Kevin, works great now!

    Regards,
    isuk

    Posted 8 years ago on Monday April 25, 2011 | Permalink
  12. Wonderful. Thanks for the update.

    Posted 8 years ago on Monday April 25, 2011 | Permalink
  13. Gil Namur
    Member

    Hey Kevin,

    This is great! Any chance that this could just get built into Gravity Forms? Or a plugin that integrates with GF and adds that feature to all fields?
    [ ] Add tooltip?
    [ _______________ ] Top Tip Text
    Would be a very nice addition!
    Cheers,
    Gil

    Posted 7 years ago on Saturday August 6, 2011 | Permalink
  14. Gil, We were just discussing the best way to implement this functionality again on Friday. It's definitely something that we do want to add, we just need to see how to best fit it into the admin UI and things like that.

    Tooltip functionality is coming and it's on the short list so we hope to include that in one of the next couple of releases if we can.

    Posted 7 years ago on Saturday August 6, 2011 | Permalink
  15. Gil Namur
    Member

    That's great news Kevin :-) You guys are top of the line!

    Cheers,
    Gil

    Posted 7 years ago on Saturday August 6, 2011 | Permalink
  16. Samantha
    Member

    Hello,

    A built-in tooltip feature would be a great addition for a current project. Any updates? Thank you.

    Posted 7 years ago on Thursday January 19, 2012 | Permalink
  17. Laser_b
    Member

    Hello,

    This works great for me as well. But... there is a little problem.

    I have set the form to ajax=true

    Unfortunately the tooltip icons disappear in the case of an error message, and when going to another part of the form ('next').

    Is there an easy way to change the script to make sure the tooltips are loaded all at once and 'remembered'?

    (The tooltips do not disappear with ajax=false)

    Posted 7 years ago on Tuesday February 14, 2012 | Permalink
  18. Any updates on this? I am trying to do the same thing and having problems with this method.

    Posted 7 years ago on Wednesday February 15, 2012 | Permalink
  19. Laser_b
    Member

    As a follow-up to my question: is 'gform post render' the way to solve the problem of disappearing tooltip icons?

    http://www.gravityhelp.com/documentation/page/Gform_post_render

    If so, would it be possible to advise on this? Thanks a lot!

    Posted 7 years ago on Thursday February 16, 2012 | Permalink
  20. Hi I'm using section breaks with headings. How can I get a tooltip next to these headings (right hand side) using the method above?

    I also notice that the tooltips with the method above do not work next to check boxes, drop-downs or radio buttons, can this be fixed

    Thanks in advance :)

    Posted 7 years ago on Sunday March 11, 2012 | Permalink
  21. GZA
    Member

    Any update on this feature? When will it be added to GF?

    Posted 7 years ago on Sunday March 11, 2012 | Permalink
  22. Hi guys any update on my post above?

    "Hi I'm using section breaks with headings. How can I get a tooltip next to these headings (right hand side) using the method above?"

    Really need to get it sorted.

    Posted 7 years ago on Wednesday March 21, 2012 | Permalink
  23. Is it possible to put an image in the tooltip? I got the tooltip working but not when using an img tag.

    Posted 7 years ago on Friday May 18, 2012 | Permalink
  24. Just figured it out. It has to be written using the single quotations.

    <img src='/wp-content/themes/platformbase/images/bin1.png'>

    Posted 7 years ago on Friday May 18, 2012 | Permalink
  25. David Peralty
    Administrator

    It does indeed. Glad you figured it out. :)

    Posted 7 years ago on Friday May 18, 2012 | Permalink
  26. I'm noticing an issue in chrome where the tooltip hover is positioned to the far left. In FF and IE, it works the way its supposed to. I can supply a URL to show you but I will need to unblock your IP.

    Posted 7 years ago on Friday May 18, 2012 | Permalink
  27. finddarkpoet
    Member

    Hi, after I paste the code into header.php, the form won't display anymore. I tried to paste it at the end of header.php file or right before </head>, same result, either way the form will disappear.

    What is the conflict here? How do I fix this? and when is it going to be implemented as a built-in feature?

    Posted 6 years ago on Friday September 21, 2012 | Permalink
  28. Please post a link to your site where we can see this problem and we will try to help.

    Posted 6 years ago on Saturday September 22, 2012 | Permalink
  29. finddarkpoet
    Member

    Thanks, I have sent the login info via "contact us".

    Posted 6 years ago on Saturday September 22, 2012 | Permalink
  30. finddarkpoet
    Member

    Hi Chris, I was wondering if you have received my link and login info.

    By using a line by line check, i've narrowed down and found out it is the 2nd section of script causing the form disappearing:

    http://pastie.org/4789998

    Please advice.

    Posted 6 years ago on Monday September 24, 2012 | Permalink
  31. Hi. I don't receive the contact form submissions. One of the other team members will receive that and respond to you.

    Pastie returned a 500 Internal Server Error for that link you posted.

    Posted 6 years ago on Monday September 24, 2012 | Permalink
  32. finddarkpoet
    Member

    The pastie link should work, maybe it was a temporary down when you tried.

    I can't paste the link here, I just sent the information again by using the Priority Support Form.

    Thanks.

    Posted 6 years ago on Tuesday September 25, 2012 | Permalink
  33. We'll leave this up to priority support since you wen that route. And since this topic is over two years old, we'll close it and request that anyone who wants similar functionality start a new topic. Thank you.

    Posted 6 years ago on Wednesday September 26, 2012 | Permalink

This topic has been resolved and has been closed to new replies.