Show Formidable Pro Checkbox Tooltips

Formidable Pro is a great tool for building any kind of form to use in WordPress. Forms can be very simple or extremely complex. Strategy 11 has built many useful hooks into the tool to allow developers to extend the plugins capabilities. For example, take a look at the following form.

Tootip Demo

Hover over any checkbox to see the tooltip.

Identify Ethnicity

Hispanic or Latino

Not Hispanic or Latino

Identify Race

American Indian or Alaska Native

Asian

Black or African American

Native Hawaiian or Other Pacific Islander

White

If you are human, leave this field blank.

This is a standard form built with Formidable Pro. The submit button is hidden to prevent anyone from clicking it. Hover your mouse over any of the checkboxes (not the label) and a tooltip will popup explaining what each checkbox means.

This often desirable feature is amazingly simple to implement in Formidable Pro using jQuery's built-in Tooltip Widget. The Tooltip Widget is included and preregistered in the WordPress distribution. To initialize the Tooltip Widget, first enqueue the script in functions.php the add the following code to your form's After Fields box in the Customize HTML section.

wp_enqueue_script( 'jquery-ui-tooltip' );

By default, the Tooltip Widget displays whatever content you have in a fields title attribute. Formidable Pro does not give us a method for specifying a field's title attribute. To create the actual Tooltips, we need to add a title attribute to the field with jQuery. But first, we need to retrieve the target field's ID#. From the form's build menu, click on the checkbox to reveal the ID#.

Once you know the checkbox ID number, you can create the Tooltips. The field ID# for the “Specify Ethnicity" checkboxes is 1198. If you view the source code for this page, you'll see that each individual checkbox is identified as field_1198-0, field_1198-1, and so on. To create a title for the field, we hook into the document ready function and assign text to the title using the following syntax:

$('#field').attr('title','tooltip');

The following code, also added to the After Fields box on the Customize HTML menu, creates the tooltips seen on this page.

This version of the sample script works for Formidable Pro Version 1.7.11 and earlier:

With the release of Formidable Pro Version 2.x and higher, the development team made some internal changes to the way checkboxes, radio buttons, and scale fields are rendered in the html. Rather than use field ID in the naming convention, Formidable Pro now uses the field key. This results in greater consistency across the platform but requires an update to your custom jQuery as seen below:

To have the same styling^✝ you see in these tooltips, add the following to your theme's style.css:

This is just a simple example that can be applied to any field on your form. As always, if you have trouble, please feel free to Contact Us.