Select Page

Ever noticed small texts when you hover the cursor over a website element? These texts giving hints/information about the elements are called Tooltips. They usually disappear once you move the cursor away.

Website developers use these tooltips in various forms. They are classified based on the detail of the content as follows:

  • The Classic Tooltip:
    It contains very little information, usually only a header. Seen usually informs, say, in creating a password. The user has hinted the minimum requirements of the password.
  • The Popover Tooltip:
    It is more detailed in the information contained. It can contain images, hyperlinks, Header with content, etc. Usually used in social media websites. Example: A user’s picture with their bio and/or website pops up as a tooltip when the cursor hovers over their name.
  • The Tour / Promotional Tooltip:
    Usually, these tooltips cannot be dismissed by simply hovering away. As evident from the name, they provide a tour of the website or any tool hosted on the website. Example: You might have come across newsletter promotions on a website, another form of this tooltip.

Tooltips are a very important step to creating a user – friendly website. When properly placed, the guide can a user through a website in a systematic way.

If you are using Gravity Forms and want to show the classic or popover tooltip then this tutorial is for you.

Tooltips for Gravity Forms

“Tooltips for Gravity Forms”

We are going to use the “Gravity Forms Tooltip Addon” plugin for adding tooltips on Gravity forms fields. it is a premium plugin with plenty of features and user-friendly controls. it uses WordPress customizer so all changes will show in the live preview.

Gravity Form Tooltips

Follow the below steps to download and install the Tooltips Addon

  • Click on this link to purchase the “Gravity Forms Tooltip Addon”
  • After you have bought the plugin then you will get an email with download details. The Plugin can also be download from WPMonks account.
  • To install and active it, you should go to your website’s WordPress dashboard -> Plugins -> Add New -> Upload and then upload the addon zip file.

You also need to install the “Style and Layout for Gravity forms” plugin. it is a free add-on of Gravity Forms that helps you design forms without using CSS code. For more information about style and layout click here.

Follow the below steps for adding tooltip to Gravity Forms

    • Open the page where you have added the form and then open the customizer. Follow this tutorial for opening the customizer.
    • Click on “Style and layouts Gravity Forms” panel
Style your Gravity forms

Click on “Style & Layout Gravity Forms” Panel

    • Use the dropdown to select the form on which you want to add tooltips. Now the page will reload and you will see all the available design options for form.
Style Individual Gravity Form

Select Your Form with Dropdown.

    • Click on Tooltip section to view all the design options.
Add tooltip on Gravity Forms

Click on “Tooltips” Section

Check below video tutorial describing above steps

For any recommendation and help regarding the plugin contact us.