TutorialTooltips for Gravity Forms

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

Adding a Tooltip

After activating the Gravity Forms Tooltips Add-on for Gravity Forms you’ll find an extra Field Settings tab called ‘Tooltip’. In it you can add the text and use HTML.

Screenshot example of adding Tooltip Content to a Paragraph Text Field in Gravity Forms with HTML inside the Tooltip.
Screenshot example of adding Tooltip Content to a Paragraph Text Field in Gravity Forms with HTML inside the Tooltip.
Screenshot of the Tooltip Content with a HTML button added.
Screenshot of the Tooltip Content with a HTML button added.

Shortcode and HTML inside Tooltip

You can use HTML and WordPress shortcodes inside the HTML Tooltip. We tried it with the GravityWP – Count add-on, our shortcode to filter and count entries (or a sum of a Number Field for multiple entries) and used it inside the Tooltip. Works like a charm.

Screenshot of adding a Tooltip with a shortcode inside the Tooltip Content, in this case to show a count of entries inside the Tooltip.
Screenshot of adding a Tooltip with a shortcode inside the Tooltip Content, in this case to show a count of entries inside the Tooltip.

We also used HTML inside the Tooltip, adding a button (Bootstrap styled). This is also allowed:

Screenshot example of a Bootstrap styled button inside the Tooltip.
Screenshot example of a Bootstrap styled button inside the Tooltip.

Styling Gravity Forms Tooltips

You can style how the Tooltip looks like in the Gravity Forms Settings > Tooltips page. Options:

  • Pick an icon for the Tooltip and define the Icon Size and the Icon color
  • Tooltip content Font Size, Text Color and Background Color
  • Placement of the Tooltip: Top Left, Top, Top Right, Right, Bottom Right, Bottom Left, Left
  • Set a maximum width of the Tooltip
Screenshot of the sitewide default styling for the Tooltip (will apply to all the tooltips, unless it's overruled inside the form settings).
Screenshot of the sitewide default styling for the Tooltip (will apply to all the tooltips, unless it’s overruled inside the form settings).

If you want to style the Tooltip for an individual Form, go to settings to Override the global tooltip options.

Screenshot of the styling settings for Tooltips in an individual Form. This overrules the default settings.
Screenshot of the styling settings for Tooltips in an individual Form. This overrules the default settings.

Read more tutorials about JetSloth

JetSloth develops add-ons for Gravity Forms, like a Color Picker field, Collapsible Sections, Bulk Add Fields, Image Choices, Gravity Forms Tooltips and Bulk Actions. Visit JetSloth.com
All tutorials JetSloth