How to Add Tooltips to Your WordPress Forms

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.

tooltip sample

WPForms is the best WordPress Form Builder plugin. Get it for free!

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>

tooltips-description

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.

tooltip sample

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.

change settings tooltips

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.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.

Comments

  1. Thanks for reading this article – I hope you found it helpful.

    I wanted to let you know about our new WordPress survey plugin that allows you to build interactive polls and surveys within minutes. You also get best-in-class reporting, so you can make data-driven decisions.

    You can get it 100% free when you purchase WPForms Pro plan.

    Get Started with WPForms Today and see why over 2 million websites choose WPForms as their preferred online form builder.

    Syed Balkhi
    CEO of WPForms

    1. Hi Daniel,

      I apologize, but I don’t believe there’s a way to do what you’re looking for. I suspect this plugin requires some content so that the user knows what to hover over.

      I case it helps, though, you might consider adding an icon rather than text. Here’s our tutorial on how to easily add a Font Awesome icon to your site.

      That tutorial will show how to load icon options to your site. Then, here’s a screenshot showing how this setup could look in a field description. And here’s a screenshot of the result on the front-end.

      I hope this helps! 🙂

      1. Hello, I tried putting in the [icon name=”info-circle”] in the description of my contact wp form and it didn’t work. it only came up with exactly “[icon name=”info-circle”]” not the icon. I have the Font Awesome plugin, installed but still no luck.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.