Tooltips for Gravity Forms

GravityWPGravityForms, Tooltip0 Comments

Do you want to show tooltips in your Gravity Forms (with extra information about a certain field)? With Magic Tooltips for Gravity Forms you can add HTML and shortcode inside your Tooltips. Even for every radio button and checkbox item.

Demo Tooltips for Gravity Forms

  • Write your name (for test purpose)
  • Write down your biggest wish. We use GravityView to show the last 5 answers in this field.
    Check the individual radio buttons tooltips (just hover over them!)
    Check also the individual checkbox tooltips (just hover over them!)
  • The tooltip appears on the right side of the HTML Block (and doesn't show a question mark).
  • The tooltip appears on the right side of the HTML Block (and doesn't show a question mark).
  • Section Break

How does the Tooltip for Gravity Forms work?

You can easily add the shortcode, text or HTML code inside a new input field in the “General” tab of every Gravity Forms field.

See for example how we added the GravityView shortcode to list the last 5 answers of that field. You can basically add anything you like to the Tooltip.


Buy Magic Tooltips for Gravity Forms

Visual Editor for Tooltips

Tooltips for every Radio Button and Checkbox

You can easily add Tooltips to individual Radio Buttons and Check boxes.

 

Just add in the Visual Editor a Horizontal line under the Tooltip text (or video, etc) to start with the Tooltip for the first radio button. Add a new horizontal line (hr) after that to add a tooltip for the second radio button or checkbox.

 

This way you can easily add tooltips to the individual check boxes and radio buttons in your Gravity Form.

It will look like this in the form:

Download Tooltips for Gravity Forms

Settings page

In the settings page you have quite some options:

  • Hide Tooltip description and show field description (Standard Gravity Forms description) as tooltip.
  • Show tooltip (option 1) When mouse hovers over the title of form field.
  • Show tooltip (option 2, both possible) When a form field is currently targeted by the keyboard, or activated by the mouse.
  • Add help icon after the title of form field.
  • Check this option if your website does not include Font Awesome yet.
  • Add underline to the title of form field.
  • Custom CSS

Tooltip Style Generator

A really cool feature is the Tooltip Style Generator. You can change several settings for the style of your Tooltip (probably well thought about by the developers):

  • Tooltip placement (position)
  • Show tooltip example in Desktop / Tablet / Mobile phone view
  • Offsets
  • Line height of text
  • Font size
  • Font color
  • Background color
  • Border color
  • Border width (doesn’t seem to work correctly)
  • Border radius
  • Padding

Some development points for Magic Tooltips

Magic Tooltips is well on their way to become a necessary extension to your Gravity Forms installation, but they still need to work out a few (some quite big) development points:

  • After installing the plugin, they add a menu link to your WordPress dashboard sidebar menu, and not on the more appropriate place, the settings page of Gravity Forms.
  • The Tooltip Style Generator (although a great functionality) is not working correctly: if you change the width of the border, it doesn’t seem to work (at least in our test). They also need to do some work on more options in generating styling options per form (overriding the general settings). The idea of a generator for style on this level is by the way… excellent, kudos to the developers.
  • A more appropriate place for the Tooltip content in the Form editor would be the advanced tab.

But, we at GravityWP are extremely enthusiastic about this plugin, so help them, buy the plugin and ask your questions in support.

Looking for a free Tooltip alternative?

You can use the free plugin on Github (developed by Norcross). The plugin is available (Gravity Tooltips), which seems to work quite good and is well maintained. Read here more about how to use the free plugin.


Download free but limited plugin (Github)

How to download Gravity Tooltips?

Click on ‘Clone or download’ and than on ‘Download ZIP’.

How to add Tooltips to Gravity Forms fields?

Styling the Tooltip text is limited

Styling of the Tooltip text is limited. You can’t use html in the text. You can insert line breaks. Use for that the html-tag for line-break:




Set a width for the Tooltip (hint.css)

You can also set a width for the Tooltip. Be aware: if you have not a lot of text in the tooltip content, it will not adjust the tooltip width, it will stay whatever you want it to be. Use this example (add the CSS to the page or your theme file) to set the width to 300 pixels:

.hint--base::after {
    width: 300px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

Change color of the tooltip (hint.css)

Use this css code to change the color of the question mark or information mark icon:

span.gf-icon {
    color: #007BC7;
}

Share this Post