How to Add Tooltips to Your WordPress Forms

Last updated on Aug 17, 2017 by Shahzad Saeed

Do you want to add tooltips to your form? Tooltips are little boxes that pop up when you hover over an element without clicking it. Today, we’ll show you how to add tooltips to your WordPress form.

Why Tooltips?

Tooltips are hints or messages that pop up when your visitor hovers over or touches an element. In your WordPress forms, tooltips can be used to add extra information about a certain field.

For example, take a look at the screenshot below.

WPForms allows you to easily add a description for each field in the form builder. Unlike a typical field description, Tooltips are hidden by default. It only appears when your user wants to know more details about a certain field by hovering over the field description.

Adding a tooltip is a good choice if you want to provide more details about a certain field without bloating the description area.

Now let’s take a look at the step by step guide to add tooltips to your WordPress forms.

1. Create a WordPress Form

The first thing you need to do is install and activate WPForms on your site.

If you need help, you can learn how to install a WordPress plugin.

Then, you’ll have to create a simple form in WordPress.

2. Install the Simple Tooltips Plugin

After creating a form, install Simple Tooltips on your site. The simple tooltips plugin allows you to show hints or tooltips when you hovered over a specific field description. On mobile devices, the tooltip appears when a field description is tapped.

3. Add a Tooltip

After installing the plugin, go back to your WPForms builder. Click on the field for which you want to add a tooltip. In the description area, add the following HTML snippet:

<span class="tooltips" title="A Tooltip!">Tooltip info</span>

In the above snippet, the title section will be shown in the tooltip bubble. You can modify the code to display your own text.

You can see it by moving your cursor over the field description.

If you want to change the background color of the tooltip bubble, you can visit Settings » Simple Tooltips. Then, choose your preferred tooltip background color using the color picker.

You can also find more configuration options, like text color, maximum width of the bubble, opacity and more on that page.

That’s it!

You’ve successfully added a tooltip to your WordPress forms.

If you want to change the look of your forms’ buttons, read how to customize button styles with CSS. Or if you prefer, see our guide on how to style WPForms with CSS Hero (no coding required).

What are you waiting for? Get started with the best WordPress forms plugin today.

If you like this article, then please follow us on Facebook and Twiter for more free WordPress tutorials.