Hint Box « Gravity Support Forums

Gravity Support Forums » General » Pre-Purchase Questions

sandman18
Member

I am looking to add a hint box to my form. I need to show an image when the mouse rolls over the text. Is there any way to do this with Gravity Forms?

Posted 13 years ago on Thursday November 25, 2010 | Permalink
Kevin Flahaut
Administrator

There are several tooltip and "hint box" scripts out there - some more difficult to add than others. It just depends on how they're implemented.

If it just requires a class name on an element, you can add custom class names to the field containers via the form editor. It may require that you use some custom jQuery to add an attribute to a form element if you need to. I'm sure it's possible, in fact, I've seen some forms that are using similar techniques. It's just something you'd have to do a little custom work to make happen.

Posted 13 years ago on Thursday November 25, 2010 | Permalink
sandman18
Member

I have found a couple scripts out there but I am not sure how to implement them into gravity forms. when I pull up the editor I don't see where to manipulate the form. Thanks.

Posted 13 years ago on Thursday November 25, 2010 | Permalink
Kevin Flahaut
Administrator

What are you trying to manipulate exactly? Trying add something to a field, etc?

Posted 13 years ago on Thursday November 25, 2010 | Permalink
sandman18
Member

Here is the best example of what I am trying to do. They give a script to insert in the <head> and then the script for the form. I don't know where to insert the script and I don't know how to add to the form field. Here is the url. http://dynamicdrive.com/dynamicindex16/showhint.htm

Posted 13 years ago on Thursday November 25, 2010 | Permalink
urmedia
Member

Don't recall off the top of my head, but I believe you can control the form field titles.

Anyway, check out simple variations like:

http://blog.robvolk.com/2009/01/jquery-form-input-hints.html

Alternately you can get far more advanced and integrate something like:

http://www.brandspankingnew.net/archive/2006/08/ajax_auto-suggest_auto-complete.html

Posted 13 years ago on Thursday November 25, 2010 | Permalink
sandman18
Member

Thanks, but it was not really what I was looking for. http://dynamicdrive.com/dynamicindex16/showhint.htm is the best example I can find. I just don't know where to put the code and how to manipulate the form field to show the question marks that you roll over.

Posted 13 years ago on Thursday November 25, 2010 | Permalink
urmedia
Member

Because GF populates the HTML for your forms this isn't something you can do easily.

Here's the route to take with the current available features of GF:

Create a text box input field and pre-populate it with a '?' and give it a class 'txtHint' or some such

In your stylesheet remove the 'box' of the input field and align accordingly

Attach the class of your '?' field to your javascript/jquery and that's that. Keep in mind, however, that that applies to a single class.

Two ways to add such function to multiple fields is to get the form as an array of fields or give each text tip a unique class name,."

I'm probably overcomplicating it..was there a basic html field with GF?

Posted 13 years ago on Thursday November 25, 2010 | Permalink
Kevin Flahaut
Administrator
Assuming you've added the scripts and styles to your theme header properly, this should work. The field description allows HTML so you could use that to insert the link/text you need to add.

example: http://grab.by/7AkF

Then, you'd just need to do a little CSS work to position the description field next to the input.. of course replacing "#field_60_2" with your actual field ID
```
/* make the container relative */
.gform_wrapper li#field_60_2 {position:relative}

/* absolutely position the hint next to the input */
.gform_wrapper li#field_60_2 .gfield_description {
position:absolute;
top:20px;
left:320px;
font-size:14px;
font-style:normal
}
```
screenshot: http://grab.by/7AkX

Of course, you can tweak all the styles to suit your particular form.
Posted 13 years ago on Friday November 26, 2010 | Permalink
ryanopaz
Member

I tried to implement this and failed! :( But then I realized that your form builder has them exactly like I want them! :)

the pop up bubbles you have on each field name in the form builder is all I want to use on my own forms. Any chance there is an easy way to do this?

thanks!

Posted 13 years ago on Tuesday November 30, 2010 | Permalink
Kevin Flahaut
Administrator

Gravity Forms uses the "Qtip" tooltip library. There are a few steps to setting it up and using it on the front end. I detailed how to do this in a post some time back. Here's the link with the how-to.

http://forum.gravityhelp.com/topic/add-help-tips-next-to-a-field#post-7277

Posted 13 years ago on Tuesday November 30, 2010 | Permalink