how-to-add-tooltips-to-wordpress-the-easy-way

UPDATED! How to Add Tooltips in WordPress (The Easy Way)

Do you want to add Tooltips to your form? Tooltips are little boxes that pop up when you hover over an area on your WordPress site, and they’re great for adding extra info about a field without crowding things.

In this post, we’ll show you how to add Tooltip in WordPress.

What’s a Tooltip in WordPress?

Tooltips are hints, glossary terms, or messages that pop up when your visitor hovers over or touches (on mobile devices) an element on your WordPress website. And in your WordPress forms, Tooltips can be used to add extra information about a particular field.

For example, take a look at the screenshot below.

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

tooltip sample

WPForms lets you 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 great idea if you want to provide more details about a certain field without creating unnecessary distractions on your form.

Now that you know what a Tooltip is, read on to find out how to add them to your site.

Is your site like all the others? Make sure to check out our lists of surprising eCommerce statistics, digital marketing statistics, online form statistics, and online business statistics!

Installing a WordPress Tooltip Without Plugin

Yes, it’s possible to install a WordPress Tooltip without a plugin. However, if you don’t want to use a Tooltip plugin to easily add a Tooltip to your WordPress site, you’ll need to be an advanced user and use html or jquery (or hire a developer to do it for you).

Luckily, you can save yourself time and money by using a Tooltip plugin. For WPForms users, we recommend the free Shortcodes Ultimate plugin.

Shortcodes Ultimate is easy to use and works great with the most popular and best WordPress themes.

This wildly helpful and free WordPress plugin will give you 50+ shortcodes to use to easily add various functions to your site, including the Tooltip shortcode. Up next, we’ll show you exactly how to add this WordPress tooltips plugin.

How to Add Tooltip in WordPress

Let’s take a look at the step by step guide on how to add Tooltip in WordPress:

Step 1. Create a WordPress Form

The first thing you need to do is install and activate WPForms on your site. If you need help, check out this guide on how to install a WordPress plugin.

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

wpforms simple contact form

Great job creating your form. We’ll come back to it in a later step.

Want to get more leads and close them faster? Add a Click to Call button on your WordPress website.

Step 2. Install the Shortcodes Ultimate Plugin

Next, click here to go to WordPress and download the free Shortcodes Ultimate plugin.

install shortcodes ultimate plugin

Or if you’re already in your WordPress dashboard, click on Plugins » Add New, search for Shortcodes Ultimate, and click Install Now.

install plugin

Once the plugin is activated, you’re ready to start using it.

Step 3: Get Your Tooltip Shortcode

Now, find the Shortcodes Ultimate plugin on the left-hand side of your WordPress dashboard and click on Available shortcodes. Scroll down that page and select the Tooltip button.

select the tooltip

On the next page, highlight and copy the shortcode:

copy tooltip shortcode

Step 4: Add Your Tooltip to Your Form

Now that you have your Tooltip shortcode, it’s time to add it to your Simple Contact Form.

Head back into your form by clicking on WPForms » All Forms and then selecting Edit under the form you’d like to add your Tooltip to.

edit your simple contact form

Once you’re on the form, click on the field you’d like to add your Tooltip to and paste your Tooltip shortcode into the description box.

add shortcode to description

Once you save your form and view it from the frontend, it will now display the Tooltip:

display the tooltip

Step 5: Customize Your Tooltip

You can also modify the code to display your own text.  Here’s an example with the changes made in bold:

[su_tooltip style="yellow" position="top" shadow="no" rounded="no" size="default" title="" content="This is the content area which will be shown in the Tooltip bubble after the user hovers over it!" behavior="hover" close="no" class=""]This is the text that will be always be displayed and will show the Tooltip content when hovered over![/su_tooltip]

customized tooltip

You can also change a bunch of different options in your Tooltip settings which you can find by scrolling to the bottom of the Shortcodes » Available shortcodes page like:

  • Style + Colors
  • Position
  • Size
  • Behavior
  • And more

The next step is optional, but will make your Tooltip look even more customized and keep your forms even more clean and distraction-free.

Since you’re optimizing your forms, you may also be interested in this great guide on eCommerce optimization.

Step 5: Turn Your Tooltip into an Icon

Unless you specifically state and invite people to hover over your Tooltip in your Tooltip shortcode, your visitors may not even realize that there’s extra content waiting to be shown in that Tooltip! A great way to make sure your readers hover over the Tooltip is to make your Tooltip an icon instead of just using text.

For example, many people add an “i” information icon and then when the user hovers over that icon, the Tooltip displays. How snazzy is that?

final tooltip display with icon

To do this, first, download and activate the free Better Font Awesome plugin. If you jumped straight to this part of the post, here’s a link to how to install a WordPress plugin if you need it.

icon on tooltip plugin

Once the plugin is activated, you’ll have access to 1,000+ free icons that you can use anywhere on your WordPress site with a simple shortcode. Now, let’s go ahead and add the Info icon’s shortcode to our Tooltip.

We’re about to put one plugin’s shortcode inside another plugin’s shortcode. But don’t worry, they’ll both still work!

Head back to your form’s Field description box that contains your Tooltip and simply replace the displayed text inside your Tooltip shortcode with this shortcode:

[icon name="info"]

The text area you should replace with the above shortcode is highlighted below:

replace this text with the better front awesome shortcode

And here’s what the code should look like once you’ve added the icon shortcode:

better font awesome shortcode added

Alternatively, you can just copy and paste the below shortcode into your description box and tweak it to your liking.

[su_tooltip style="yellow" position="top" shadow="no" rounded="no" size="default" title="" content="Tooltip text" behavior="hover" close="no" class=""][icon name="info"][/su_tooltip]

Next, save your form and check it out on the frontend to see your Tooltip icon.

final tooltip display with icon

Great job! Now, if you’d like to get even more advanced and place the Tooltip icon above the field next to the label, check out our in-depth tutorial on how to add icons to WordPress forms.

Final Thoughts

That’s it! You now know how to add Tooltip in WordPress.

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 Twitter 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

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.