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.
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.
1 | wp_enqueue_script( 'jquery-ui-tooltip' ); |
1 2 3 4 5 6 | <script> jQuery(function() { "use strict"; $( document ).tooltip(); }); </script> |
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:
1 | $('#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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <script> jQuery(document).ready(function($){ $('#field_1198-0').attr('title', 'A person of Cuban, Mexican, Puerto Rican, South or Central American, or other Spanish Culture or origin regardless of race.'); $('#field_1198-1').attr('title', 'A person NOT of Cuban, Mexican, Puerto Rican, South or Central American, or other Spanish Culture or origin regardless of race.'); $('#field_1199-0').attr('title', 'A person having origins in any of the original peoples of North and South America (including Central America) and who maintains tribal affiliation or community attachment.'); $('#field_1199-1').attr('title', 'A person having origins in any of the original peoples of the Far East, Southeast Asia, or the Indian subcontinent, including, for example, Cambodia, China, India, Japan, Korea, Malaysia, Pakistan, the Philippine Islands, Thailand, and Vietnam.'); $('#field_1199-2').attr('title', 'A person having origins in any of the black racial groups of Africa.'); $('#field_1199-3').attr('title', 'A person having origins in any of the original peoples of Hawaii, Guam, Samoa, or other Pacific Islands.'); $('#field_1199-4').attr('title', 'A person having origins in any of the original peoples of Europe, the Middle East, or North Africa.'); /* activate the tooltip function */ $( document ).tooltip({ position: { my: "center bottom-20", at: "center top", using: function( position, feedback ) { $( this ).css( position ); $( "<div>" ) .addClass( "arrow" ) .addClass( feedback.vertical ) .addClass( feedback.horizontal ) .appendTo( this ); } } }); }); </script> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <script> jQuery(document).ready(function($){ "use strict"; $('#field_2f4fn72-0').attr('title', 'A person of Cuban, Mexican, Puerto Rican, South or Central American, or other Spanish Culture or origin regardless of race.'); $('#field_2f4fn72-1').attr('title', 'A person NOT of Cuban, Mexican, Puerto Rican, South or Central American, or other Spanish Culture or origin regardless of race.'); $('#field_tp1j0-0').attr('title', 'A person having origins in any of the original peoples of North and South America (including Central America) and who maintains tribal affiliation or community attachment.'); $('#field_tp1j0-1').attr('title', 'A person having origins in any of the original peoples of the Far East, Southeast Asia, or the Indian subcontinent, including, for example, Cambodia, China, India, Japan, Korea, Malaysia, Pakistan, the Philippine Islands, Thailand, and Vietnam.'); $('#field_tp1j0-2').attr('title', 'A person having origins in any of the black racial groups of Africa.'); $('#field_tp1j0-3').attr('title', 'A person having origins in any of the original peoples of Hawaii, Guam, Samoa, or other Pacific Islands.'); $('#field_tp1j0-4').attr('title', 'A person having origins in any of the original peoples of Europe, the Middle East, or North Africa.'); /* activate the tooltip function */ $( document ).tooltip({ position: { my: "center bottom-20", at: "center top", using: function( position, feedback ) { $( this ).css( position ); $( "<div>" ) .addClass( "arrow" ) .addClass( feedback.vertical ) .addClass( feedback.horizontal ) .appendTo( this ); } } }); }); </script> |
To have the same styling✝ you see in these tooltips, add the following to your theme's style.css:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <style> .ui-tooltip, .arrow:after { background: black; border: 2px solid white; } .ui-tooltip { max-width: 300px; padding: 10px 20px; color: white; border-radius: 20px; font-size: 14px; font-weight: bold; box-shadow: 0 0 7px black; } .arrow { width: 70px; height: 16px; overflow: hidden; position: absolute; left: 50%; margin-left: -35px; bottom: -16px; } .arrow.top { top: -16px; bottom: auto; } .arrow.left { left: 20%; } .arrow:after { content: ""; position: absolute; left: 20px; top: -20px; width: 25px; height: 25px; box-shadow: 6px 5px 9px -9px black; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .arrow.top:after { bottom: -20px; top: auto; } </style> |
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.
✝If you have more than one plugin that loads a jQuery UI theme, make sure you turn off all but one. For example on this site, Formidable Pro loads the jQuery UI theme selected for the date picker and the Squelch Tabs and Accordions plugin also loads a jQuery UI theme. To get these tooltips to work properly, I disabled the Squelch Tabs and Accordions jQuery UI theme and only use the one that Formidable Pro loads. Load more than one theme and you will create a conflict that is difficult to troubleshoot.
Please forgive above typos also…
Hi Victor,
This is in follow-up to the ToolTips bubble positioning in the formidable demo above. As mentioned, I been able implement it, however, find that the bubble appears to shift upwards when hovering over the elements. You mentioned that this was not due to a formatting conflict in my form but rather to the mouse positioning itself. I’ve tried adjusting the position settings in {my: and at:} but to no avail. Can you point me in the right direction to resolving it since you mentioned seeing it before? Forgive the untended pun 🙂
Thanks for your great help
Leslie