Select Page

The tooltip contains additional information about the form field. It pop-up as a small box with text when the user hovers over the icon next to the field label. It is normally used when you want to give hints to users about the field.  Tooltips are not limited to the Contact forms. Many operating systems like Microsoft Windows and Linux are using these features to show additional information.

Tooltip on Gravity Forms field

Tooltip on Gravity Forms field

Adding tooltips on Gravity Forms is a difficult task because it doesn’t have an inbuilt feature which lets you add tooltips. To add them you have to either use a 3rd party add-on or if you are familiar with coding then you can use tooltips javascript libraries.

There are many WordPress plugins which let you add tooltips on Gravity form fields but the problem with these plugins arise when you need to style tooltips to match your website’s theme. They come with premade themes and don’t let you customize your own theme for tooltips.

In this article, we are going to show you how can you add tooltips on Gravity forms fields using WordPress plugin “Gravity forms tooltip”  and design a custom theme using plugin’s features.

About the “Gravity Forms Tooltip” plugin.

“Gravity Forms Tooltips” helps to add tooltips on Gravity forms fields. It lets you add text, links, images, videos, etc in tooltips. You can use any HTML tag to show tooltip text. Its features set it apart from other tooltip plugins. It has four premade themes and 10+ animations. It allows you to create your own custom theme for tooltips. Using custom theme option you can change any aspect of tooltip including text. It has 10+ tooltip icons. To know more about all the features of “Gravity forms tooltip” plugin check our blog.

Required Plugins For the plugin

Required Plugins For the plugin

Note: “Gravity Forms Tooltips”  is a premium add-on of “Styles and layouts for Gravity forms”. To add tooltips on Gravity forms you need both these plugins. Without the “Styles and layouts” plugin it doesn’t work.

“Styles and Layouts for Gravity Forms” is a free WordPress plugin. It lets you style Gravity Forms without using any CSS. You can read more about this plugin using this link OR Download it from WordPress plugin repository using this link.

Steps to Add tooltips on Gravity form fields

  • Purchase the plugin with this link. After payment, you will get an email with download details of the plugin. Or use WPMonks account to download it directly.
  • To install and activate the plugin go to WordPress dashboard then click on the plugins -> add a new option on the left side menu. Now click on the upload button at the top and choose tooltip plugin zip file and click on install button. Then activate it.

    Install plugin zip file.

    Install plugin zip file.

  • Go to the page on frontend where Gravity form has added and open customizer from top customize button. More info about opening the customizer click here.
  • Click on “Styles and Layouts” panel in the customizer and select form you have in the page. After selecting the form page will reload automatically.

    Styles and Layouts panel in Customizer

  • Open tooltip section and all settings will start showing. Don’t forget to check the “Enable tooltip” checkbox option.

    Add tooltip on Gravity Forms

    Tooltip section in Customizer

  • Scroll down to text boxes with Gravity forms field label. Here you can add your tooltip text for each field you want.

Steps to create a Custom theme for tooltips

  • Go to “Tooltip Theme” dropdown in customizer settings for tooltip.

    Tooltip theme option for selecting themes

  • Select the last option “Custom” using the dropdown and all settings to style tooltip will start showing.

Available options to style custom theme for Tooltips

These follow options only start showing after you have selected the “Custom” option form “Tooltip Theme” Dropdown.

Follow options after selecting the custom option for tooltip theme

Tooltip Background Color: Click on Select color and choose a background color. This background color will add as the background color of the tooltip box which popup when you hover on the icon button.

Font Size: Here you can change the font-size of tooltip pop-up box. You have to use px, em, rem, units with font-size otherwise it will not work.

Tooltips Font Color: This setting helps you to change the font color of the text in the tooltip popup box. You can either choose a color using the box or if you have hex code add it in the input box.

Border Size: Here you can change the border size of the tooltip popup box. You must add units like px, em, rem numeric value.

Border Radius: This setting allows you to add radius around the tooltip box. For example, the value you have added in the input will round all corner of the tooltip popup box. Here you also need to add units like px, em, rem with a numeric value.

Tooltip Border Color: This setting helps you to change the border color of the tooltip box. Just click on the select color option and choose a color from available options. You can also add hex code here using input box before the color box. Tooltip Arrow Color: The changes you made here will change the color of the arrow which shows between the icon and tooltip box.

Icon size: This setting comes after the “Choose icon” dropdown. We created this option as dropdown with some limited font-sizes. It helps you to change the size of the tooltip icon.  You can choose any font-size between 9px – 24px.

Note: Don’t forget to add CSS units like px, em, rem, etc with numeric values. Without these units, changes will not add on the tooltips and you can use custom hex codes for color settings.

Video Tutorial to create a Custom theme for tooltips.

We created this below youtube video for better understanding. In this video tutorial, we are showing all required steps to create own custom theme for tooltip.

Support for plugin

If you have any issue or need support regarding this plugin or Gravity forms than contact us or leave a comment in the below comment section we will reach to you shortly.

To learn more about how you can add videos and image in tooltip go to our blog using this link or check articles in the right sidebar.