Form Field Tooltips with Tippy.js

Adding form field tooltips to your forms & web-pages is a great way to provide additional information to users and let then know what you need from them.

As Nick Babich from UX Planet explains “Tooltips are a very helpful tool for educating users. They help users understand unknown or unfamiliar objects that aren’t described directly in the user interface. Tooltips act as just-in-time support — they provide information users need when they need it, with minimal effort on their part (all users have to do is to hover the mouse over the object and wait), and help app developers use screen space more effectively (reduce screen clutter).”

But how do you add form field tooltips built with Formidable Forms? One option is to use Tippy.js

Here’s a quick demo:

Why use Tippy.js?

There are obviously loads of ways of adding tooltips to form elements and it’s actually not that hard to add them manually by writing some JavaScript and CSS yourself. However what Tippy.js brings to the table is a hell of a lot more than just simple tooltips and in our opinion you’ll be hard pressed to find a more complete solution. It’s also super easy to add them to a Formidable Form.

Some of the key advantages to using Tippy.js are:

Smart: Tippy has an optimized positioning engine for flipping and overflow prevention
Universal: They work with mouse, keyboard, and touch inputs
Accessible: WAI-ARIA compliant
Themeable: style via custom CSS or use the built themes and animations

Getting Started – Simple Form Field Tooltips

As we mentioned above this is super easy to do and once you have the basics you can then spend as long as you like tweaking the design & styles of the tooltips however you like. To add the basic functionality follow these steps:

Add a form field to your form. It can be any type of form field that Formidable offers in either the Free or Pro versions
Save the form
Go to Settings > Customise HTML > After Fields and add the 2 scripts below

<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>

Now you need to decide where you want to display the toolips. You can display them almost anywhere but choosing where to display them will determine what you need to do next. In the example above we’ve given 3 examples:
1. In the field label
2. Using the field options
3. In the field description

For this tutorial we’ll look at how to display them in the field description but the process is largely the same wherever you decide to put them.

1. Go back to the form element that you added earlier and add a <span> to your field description and give that span a unique ID. For example: This has a field description. <span id="email_symbol_1">Hover here to see the tooltip</span>.
2. Save the form

Go to Settings > Customise HTML > After Content and add the following script UNDER the 2 scripts you added previously.

< script >
tippy('#email_symbol-1', {
	content: 'The field above is an email field. Please enter your email address so we can contact you.',
}); <
/script>

Save the form

And thats it. Super simple.

You can keep adding Form Field Tooltips to more fields by adding more <span> elements with unique ID’s and then calling them in your script like so:

<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
<script>
   // With the above scripts loaded, you can call `tippy()` with a CSS selector and a `content` prop
       tippy('#email_symbol-1', { content: 'The field above is an email field. Please enter your email address so we can contact you.', });
       tippy('#phone_symbol-1', { content: 'The field above is an phone number field. Please enter phone number so we can contact you.', });
       tippy('#interest_symbol-1', { content: 'Please tell us which of these activities interest you most.', });
</script>

Getting Started – Alternate Version

There are multiple ways to add Form Field Tooltips to your forms and this is another super simple way of doing it using data attributes:

Add a form field to your form. It can be any type of form field that Formidable offers in either the Free or Pro versions
Save the form
Go to Settings > Customise HTML and find the [input] shortcode for your new field.
Add the data attribute data-tippy-content="My Cool Tooltip" to the [input] shortcode so it looks like this: [input data-tippy-content="My Cool Tooltip"]
Change “My Cool Tooltip” to whatever you want to display in the tooltip.
Scroll down to the ‘After Fields’ section and insert the below scripts
Save

<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
<script>
       tippy('[data-tippy-content]');
</script>

Tippy.js comes with loads of options to customise your tooltips and is super easy to implement with Formidable Forms. These basic examples should be enough to get you started and you can then customise your version to whatever you need.

Enjoy.

Form Field Tooltips with Tippy.js