Select Page

Tooltips are small text boxes that pop up when the cursor hovers over icons next to labels. These provide hints to the user as to what the field is about. This is not limited to online forms but Microsoft Windows has had this feature for quite some time now.

Tooltip on Gravity Forms field

Tooltip on Gravity Forms field

There are different kinds of tooltips used for different purposes. Usually, systems without a cursor don’t have a concept of tooltips, because there is nothing to hover over.

There are the Classic Tooltips, where the user can hover over the highlighted word to provide a hint or an explanation of its use. They are small, usually containing only text.

Then there are Popover Tooltips. These have much more information regarding something once the user hovers over a trigger. Social media uses such tooltips with one’s username as the trigger. They provide an enlarged photo, with any bio or links to other websites. They are much more detailed and larger than the normal tooltips.

Websites having a large layout have a Promotional Tooltip that is used to provide a demo of the layout that is triggered by certain actions. These tooltips don’t close by itself. Usually, they contain images or buttons along with headers and content. Sometimes advertisements or an invitation to their newsletter.

Tooltips on Gravity forms fields with different themes.

Without a plugin or javascript library, it is very difficult to add a tooltip in a form field. Even those who know how to code, prefer to use js libraries for tooltips. If someone doesn’t know about coding then they have to hire a developer which results in higher project cost. But there are many good plugins for tooltips in WordPress which allow adding tooltips without any coding experience.

This tutorial is about adding tooltips in Gravity Form fields. In this article, we are going to show how you can add video tooltips in the Gravity Form field using “Tooltip for Gravity Forms” plugin. We will use a youtube and Vimeo video in the tooltip instead of simple text.

Video instead of tooltip text in Gravity Forms

Video instead of tooltip text in Gravity Forms

About “Gravity Forms Tooltip” plugin

“Tooltip for Gravity Forms” is a famous WordPress plugin for adding tooltips in Gravity Forms. Its functionality gives options to add text, HTML code, images, youtube, Vimeo videos in tooltips. Beside adding tooltips in fields it allows you to customize them according to your website’s theme. You can choose a tooltip icon from 15+ icons. It has 5 beautiful themes and the option to customize your own theme.

Required Plugins For the plugin

Required Plugins For the plugin

How to add tooltips on Gravity forms.

Note: “Tooltip for Gravity Forms” is an add-on of “Styles and layout for Gravity forms”. For more information about “Styles and layouts” plugin click on this link.

Follow steps to add tooltips on Gravity forms fields.

  • Purchase the “Gravity Forms Tooltip Addon” plugin using this link.
  • After purchasing you will get an email with download details. You can also download it directly from WPMonks account.
  • Install the plugin by going to the website’s dashboard -> Plugins -> Add New -> Upload the plugin zip file then click on the install button. Don’t forget to activate the plugin.

    Install plugin zip file.

    Install plugin zip file.

  • Open page on frontend where you have added form and click on “customizer” button at the top. Click to read about other ways to open customizer.
  • Once the customizer is open then click on styles and layouts and select the form on which you want to add tooltips.

    Styles and Layouts panel in Customizer

  • Now click on the Tooltip section. It will show all settings to add tooltips on Gravity forms fields.

    Add tooltip on Gravity Forms

    Tooltip section in Customizer

  • To add tooltips on fields check “Enable tooltip” options.
  • After some settings, there will be text-areas with labels for every field.

    Textarea to add tooltips

    Textarea to add tooltips

  • Add tooltip on your desired fields.
  • Don’t forget to publish the form using the publish button at the top.

    Click on "Publish Button" to save changes.

    Click on “Publish Button” to save changes.

Follow steps to add youtube video in the tooltip.

  • Go to Youtube and open video you want to show in the tooltip.
  • Below youtube video there is a share button with icon. Click on this button.

    YouTube share button

    YouTube share button

  • Youtube will open a popup with options to share the video. Click on embed code icon from the second section.
  • Now copy the code on the right-hand side under the embed section.

    Copy the highlighted Link using the copy button.

  • Go to your website and open the tooltip section in the customizer and check “Enable Tooltip” checkbox.
  • Paste the code in text-area of the desired field.

    ifram link in Gravity Forms field.

    ifram link in Gravity Forms field.

Follow steps to add Vimeo video in the tooltip.

  • Go to Vimeo and open video you want to show in the tooltip.
  • There are some icons on right-top of the video which will shows after you hover on it. Click on the share button at last.

    Share button on video

    Share button on video

  • Copy the code under “Embed” section.

    Copy link in Embed Section

    Copy link in Embed Section

  • Go to the website and Open the tooltip section in the customizer.
  • paste this link in field text-area and customizer will preview your video on the tooltip.

For any issue or support regarding this plugin use contact form or comment in the below section.