This solution represents implementing the hint.css, a pure CSS tooltip library, over the top of a Formidable Pro form.
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.
Hint.CSS
(A pure CSS tooltips solution)
Build your form as you always would and then do the following:
Go to the “Customize HTML” section of your form .In the “Before Fields” subsection we add the following:
<link rel="stylesheet" href="[hint.css and file name and location here]"></link>
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="[hint.css and file name and location here]"></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.
That’s it. Enjoy!
