• Skip to content

Victor Font Consulting Group, LLC

Digital Business Strategists

Call Us Toll Free:

1-844-VIC-FONT (842-3668)

  • Home
  • Portfolio
  • Care Plans
  • Shop
  • FAQs
  • Support
  • Our Team
    • Contact
    • Make Appointment
    • Speakers
  • Resources
    • Free WordPress Video Training
    • Graphic Design
    • Articles
    • Cybersecurity
    • Tutorials
    • Code Snippets
    • Free Plugins
    • EU Referral Network
You are here: Home / Code Snippet / Show Formidable Pro Checkbox Tooltips

Show Formidable Pro Checkbox Tooltips

By Victor M. Font Jr.
July 31, 20142 Comments

Formidable Pro LogoFormidable 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.

Sending

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.

Enqueue tooltip script in functions.php
PHP
1
wp_enqueue_script( 'jquery-ui-tooltip' );
JavaScript
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#.

checkbox-id-number

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:

JavaScript
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:

Formidable Pro Version 1.x
JavaScript
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:

Formidable Pro field key

Formidable Pro Version 2.x
JavaScript
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:

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.

  • 0shares
  • Facebook0
  • Twitter0
  • Google+0
  • Pinterest0
  • LinkedIn0
  • Print
  • SMS0

About Victor M. Font Jr.

Victor M. Font Jr. is an award winning author, entrepreneur, and Senior IT Executive. A Founding Board Member of the North Carolina Executive Roundtable, he has served on the Board of Advisors, of the North Carolina Technology Association, the International Institute of Business Analysis, Association of Information Technology Professionals, Toastmasters International, and the North Carolina Commission for Mental Health, Developmental Disabilities, and Substance Abuse Services. He is author of several books including The Ultimate Guide to the SDLC and Winning With WordPress Basics, and Cybersecurity.

Reader Interactions

VictorFont.com runs on the Genesis Framework

Genesis FrameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple—start using Genesis now!

Click here to download The Genesis Guide for Absolute Beginners (PDF - 1.4 MB)

Leave a Reply Cancel reply

Your email address and website will not be published. Required fields are marked *
Posting a comment means that you agree with and accept our Comment & Product Review Policy

Comments

  1. Leslie Guppy

    July 4, 2016 at 11:05 am

    Please forgive above typos also…

    Reply
  2. Leslie Guppy

    July 4, 2016 at 10:52 am

    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

    Reply

Toll free: 844-VIC-FONT (844.842.3668)

Send us an E-mail Fax: 919.205.4446

Affiliate Marketing Disclosure | Comment & Product Review Policy

Privacy Policy | Cookie Policy | Site Map

Copyright © 2003–2019 Victor M. Font Jr.

Return to top of page
Cover image: 5 Things You Can Fix On Your Website In The Next Week To Increase Engagement

Attract New Customers Automatically for Free!

  • Learn how to use the Internet to attract REAL clients
  • Avoid the 3 big mistakes EVERYBODY makes
  • Put this system on AUTOPILOT with the tools the Pros use!

GET YOUR COPY!

This little ebook has helped hundreds of business professionals get real results.
Now it's your turn!

ebook lead capture
Privacy Policy
{"cookieName":"wBounce","isAggressive":false,"isSitewide":true,"hesitation":"","openAnimation":false,"exitAnimation":false,"timer":"","sensitivity":"","cookieExpire":"7","cookieDomain":"","autoFire":"","isAnalyticsEnabled":false}
We only use analytical cookies on our website that allow us to recognize and count the number of visitors and to see how visitors move around the site when they are using it, but they do not identify you individually. They help us to improve the way our website works, for example by ensuring that users are finding what they are looking for easily. Read more about the cookies we use by clicking the Cookie Policy button. By clicking OK you agree to cookies being used in accordance with our Cookie Policy. If you don’t agree you can disable cookies—see the Cookie Policy for more details.
Ok No Cookie Policy