TutorialTooltips for Gravity Forms

Do you want to show tooltips in your Gravity Forms (with extra information about a certain field)? With Magic Tooltips for Gravity Forms 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.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close