Formiable Pro – Tooltips Tutorial

Hey everyone, this is a long overdue tutorial as part of what I originally planned as a series of tutorials. My apologies and I can’t promise any urgency on anything else, but here it is. I previously wrote a tutorial on adding tooltips to Formidable Pro form fields. Redoing it is pretty easy really. Go to https://github.com/chinchang/hint.css and download  the Full Build “minified” css to generate the tooltips. Upload the onto your server somewhere that you can reference it.

Customizing the HTML and applying tooltips to your fields

Add

<link rel="stylesheet" href="[hint.css location here]"></link>

My Example (below):

<link rel="stylesheet" href="https://techmavenconsulting.com/wp-content/themes/nullcoreII/css/hint.min.css"></link>

To the “Before Fields” text area at the top in the “Customize HTML” section of the form settings above everything else. Then just add the appropriate class to each input object for each field like so:

<div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">
    <label for="field_[key]" class="frm_primary_label">[field_name]
        <span class="frm_required">[required_label]</span>
    </label>
    <span class="hint--right" data-hint="My tooltip here">[input]</span>
    [if description]<div class="frm_description">[description]</div>[/if description]
    [if error]<div class="frm_error">[error]</div>[/if error]
</div>

If the field is a radio or checkbox you have to define each option like so:

<div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">
    <label for="field_[key]" class="frm_primary_label">[field_name]
        <span class="frm_required">[required_label]</span>
    </label>
    <div class="frm_opt_container"><span class="hint--right" data-hint="Tooltip Option 1 text">[input opt=1]</span></div>
    <div class="frm_opt_container"><span class="hint--right" data-hint="Tooltip Option 2 text">[input opt=2]</span></div>
    [if description]<div class="frm_description">[description]</div>[/if description]
    [if error]<div class="frm_error">[error]</div>[/if error]
</div>

Notes: Depending on the theme you are using you may have to do some additional CSS changes/modifications per form for it to look nice. I had to add a CSS override to the before fields section to make it so that the tooltips CSS doesn’t overwrite the formidable css input box widths. The example below includes my original examples hint library style link:

<link rel="stylesheet" href="https://techmavenconsulting.com/wp-content/themes/nullcoreII/css/hint.min.css"></link>
<style>.with_frm_style input[type="text"], .with_frm_style input[type="password"], .with_frm_style input[type="email"], .with_frm_style input[type="number"], .with_frm_style input[type="url"], .with_frm_style input[type="tel"], .with_frm_style select, .with_frm_style textarea, .frm_form_fields_style, .with_frm_style .frm_scroll_box .frm_opt_container, .frm_form_fields_active_style, .frm_form_fields_error_style, .with_frm_style .chosen-container-multi .chosen-choices, .with_frm_style .chosen-container-single .chosen-single {
  width: 550px !important;
}
</style>

For horizontally aligned radios and checkbox, you’ll need to add the following. Note: Checkbox fields use the “horizontal radio” class.

.horizontal_radio .frm_opt_container {
    float: left !important;
    margin-right: 12px;
}

This doesn’t work with CSS layout classes that you can define when building the form, nor is it responsive. I plan to provide a workaround at some point in the future.

Working Example:

That’s it. Enjoy!