Step-by-Step Guide: How to Add Tooltips to WordPress

Tooltips are a subtle way to add extra information to your WordPress pages without overloading users or cluttering your screen. When you utilize the Usetiful plugin for WordPress, you can easily add these contextual clues to enhance user experience and help them navigate your site. In this article, we’ll show you exactly how to add these helpful elements.

What are tooltips?

Not everyone knows what tooltips are called, but they’ve almost certainly used one. Tooltips are the noninvasive user interface (UI) elements that are triggered when you scroll over web pages. 

If you’ve ever filled out an online form, you’ve probably come across these elements. For example, when you hover your mouse over a password input field, a text box might pop up telling you that your password should be “At least 8 words long and contain a number and a special character”.

If you have a website, you can use tooltips for a variety of things.

In the past, if you wanted tooltips on your site, you needed to know HTML, JavaScript, or CSS. Now, thanks to the Usetiful plugin for WordPress, you can add these helpful elements even if you don’t know any coding.

If you want to know more about tooltips and the different things you can use them for, read our article Guide to Tooltips – How To Drive User Adoption With Tooltips.

Adding tooltips to WordPress websites

In this guide, we’ll teach you how to add a landing page with tooltips to your WordPress site. However, you can add tooltips for a wide variety of purposes.

#1. Add a form

The first thing you’ll need to do is add a form plugin. There are a lot of great free and paid choices on WordPress. Some of the best options are:

• WPForms

• Typeform

• Formidable Pro

• Ninja Forms

• Gravity Forms

You can find a list of form plugins here. For this article, we’ll choose WPForms because it’s very popular and user-friendly.

So, go to your Admin panel, and install and activate WPForms.

#2. Install the Usetiful plugin on WordPress

Next up, you need to install Usetiful on WordPress.

Follow this simple step-by-step guide.

1. Go to your WordPress admin dashboard

2. Select “Plugin,” then hit “Add New”

3. Type in “Usetiful” and press the search button

4. Locate the Usetiful plugin and press “Install Now”

5. Go to usetiful.com and open your existing account or register a new one

6. On the left-hand side of the Usetiful page, in the “Overview” panel, select “Install to your site”

7. Scroll through the script and locate your Usetiful key, and copy it

8. Return to WordPress, select Usetiful Settings on the left, and enter the key 

Now, you’re ready to build tooltips on your WPForms.

#3. Design tooltips for WordPress

If you’ve already used Usetiful to design a product tour or walkthrough, adding a tooltip will be a breeze. 

The first thing you need to do is go to Usetiful. On the home page, under the Your Content heading, select Smart Tips. Alternatively, you can navigate to this section on the left-hand side panel.

On the Smart Tips page, select the big blue button that says “+ Create Smart Tips”.

The page will be split into three sections:

1. A panel that contains all the tooltips you can create

2. A setting screen for each individual tooltip

3. A preview window where you can edit the content of each tip.

4. When you load up the screen, a tooltip will already be added. However, you can also select “Add Tip” if you need multiple tips on a single page or under one project.

#4. Setup your tooltips

Each tip has settings that define how it acts. Let’s explore each one.

Title: The tooltip title will appear on your user screen. You can name this anything you want or leave it blank. 

*You can add the content of your tooltip on the preview page. Type it in now, or do it once it’s set up.

Element: This is where the magic happens. The element section must be filled because each tooltip should have a target. 

So, hit the target button. If you are using Chrome, you will be prompted to add the Usetiful Chrome extension to help you lock on to the target that will trigger the tooltip.

When you hit the target button, it will open a new box that says “Fill URL to select.”.

Here you punch in the page where you want your tooltip to appear. For example, www.yoursite.com. You can also add other pages, such as www.yoursite.com/blog, and add tooltips to those too.

Once you punch in your target webpage, the box will allow you to select Open Page. This opens up a special version of your page that allows you to select the HTML element that will prompt your tooltip.

#5. Select your element

When you select Open Page, it takes you to your webpage. As you move your mouse across the screen, it will allow you to select specific elements. For example, if you’ve added a new feature, you can select it, and it will be added to the Element section. 

Now, you need to define how your tooltip will behave.

In the “Display On” section, you will have three choices:

1. Mouseover: tooltip triggers when the user hovers over the element

2. Click: triggers when users click on an element

3. Focus: triggers when users enter the input field

Select what is appropriate, and then you need to think about the orientation against the element section. Essentially, this defines where your tooltips appear relative to your element, i.e., left, right, top, or bottom. You can also select Automatic, and Usetiful will choose the best spot.

#6. Additional options & advanced settings

Beacons, those pulsating red dots that attract users to parts of a webpage, are another subtle way to highlight areas. You can add these to each element to encourage users to check them.

You have three options here:

1. A beacon

2. A questions mark

3. An “I” for information mark

Select what’s appropriate. You can also adjust the position, should you wish.

Finally, there is the “Advanced Settings'' option. This setting allows you to add CSS classes, so Usetiful matches your website's overall look and feel. These advanced settings are available with the Plus Plan and higher.

If you haven’t done it earlier, type in your tooltip’s content now.

#7. Publish your tooltips

Once your tooltip is completed, it’s time to publish it to your website. With a click, the tooltips are now shown on your WordPress, and you can edit them anytime on the go without turning back the tooltips to draft. All changes will be updated and synchronized automatically.

Now you can sit back and relax while your users self-service themselves with the tooltips you provided.