Select Page

Tooltips are small boxes of hinting text that appear when the cursor is moved over any field label or icon. These icons or labels are known as a trigger. Usually, tooltips disappear when the cursor moves away from the trigger.

Tooltip on gravity forms using "Gravity Forms Tooltip" plugin

Tooltip on Gravity Forms field

Windows has had this feature for a long time now. The tooltips can be designed to a position above or below or any other direction. There are different kinds of tooltips depending on its use and detail.

We’ve all heard of the Classic Tooltip:

These only contain text. Usually used to hint at something small. For example, the requirements for a password.

Then there are the Popup Tooltips:

These tooltips are much larger, containing more detail. For example, we have a detailed product description when the cursor hovers over the product. These tooltips may be clickable or include text fields to enter data.

There is also a Promotional Tooltips:

These tooltips, as the name suggests, usually pop up just after loading a site or at the end of the article, asking the user to register or sign up to their newsletter. Sometimes, the website may provide some service which requires a walkthrough. In such cases, these tooltips provide the user with a demo of the layout.

Tooltips on Gravity forms fields with different themes.

Now we know about tooltips and their type but the question is how to add them in “Gravity forms”. If you have knowledge about Javascript then you can use js tooltips libraries.

For those people who are not familiar with coding languages and want to add tooltips on the Gravity forms then we have a plugin for them. This plugin lets users add tooltips without any coding.

We are going to show you how to add tooltips using “Gravity Forms tooltip” plugin.

About Plugin: “Gravity forms tooltip” is an add-on of “Styles and Layouts for Gravity Forms”. It lets you add tooltips on form fields without any coding. Beside adding tooltips on fields it has features to style tooltips to match your website. It is built-on WordPress customizer so you can see the live preview of tooltips. You can add text, image, video, audio, links, etc as a tooltip.

To use “Gravity forms tooltip” you have to install/activate “Styles and Layouts for Gravity Forms” plugins. Otherwise, it will not work.

Steps to add an image as a tooltip in Gravity forms.

  • Purchase the “Gravity Forms Tooltips” plugin using this link.
  • After payment has completed you will receive an email with download details OR download it directly from WPMonks account.
  • For installing the zip file Go to your website’s Plugin -> Add New -> upload choose the zip file then click on the upload button and install the plugin

    Install plugin zip file.

    Install plugin zip file.

  • open page on frontend where you have added Gravity Form and click on customizer button at the top. Read about more ways to open WordPress Customizer.
  • Go to “Style and layout” section and select form which you have added in the page.

    Styles and Layouts panel in Customizer

  • Once the page has reloaded then click on the “Tooltip” section and you will see all available settings for tooltips.

    Add tooltip on Gravity Forms

    Tooltip section in Customizer

  • Check first “Enable tooltip” checkbox to enable tooltips.
  • After some design settings for tooltips, there are “textarea” fields with field label for every Gravity form field. Here you can add text which will show on form fields.

    Textarea to add tooltips

    Textarea to add tooltips

  • To add an image as a tooltip copy the image link and add in HTML “img” tag in src attribute as in below example

    Image in tooltip

    Image in tooltip

HTML Image tag

<img src=””smiley.gif”” alt=””Smiley” width=””42″” height=””42″” />

Remember you need to add Image link in src attribute and alt text as an alternative in case image doesn’t load. Use height and width tag for adding width and height on the image

if you want to add video as tooltip text then follow this link or check more articles about “Gravity forms tooltip” in the right sidebar.

For any issue regarding this plugin contact us using the contact form from the navbar or leave a comment below.