How to Add a WordPress Tooltip (2 Ways: Free Plugin or CSS)

There are times when you need to give your website’s users more information, but simply don’t have enough page real estate. You can always include links to other pages, but in many cases, the most convenient approach is to add a simple WordPress tooltip that displays all the information users need.

With a WordPress tooltip, also called a CSS hover tooltip, all the information visitors need is right there by ‘mousing over’ the right element.

In this article, we’ll show you some of our favorite examples of CSS hover tooltips in action. Then we’ll teach you how to add them to your website with and without plugins.

Let’s dig in!

An introduction to CSS hover tooltips

The concept of a WordPress tooltip is simple. They’re floating containers that ‘pop-up’ when you mouse over specific elements.

Usually, hover tooltips provide additional information you don’t want to include in the original design.

For example, if you’re building a pricing table, tooltips can help you break down what each feature does without bulking up the design:

Other use cases include word definitions, adding sources to your content, editorial comments, maps, and pretty much any other element you can think of.

Two ways to add a WordPress tooltip

WordPress enables you to use multiple approaches when it comes to adding tooltips to your website. You can either do so manually (which involves adding some code) or use a plugin.

We’ll start by showing you how to add tooltips with a free WordPress tooltip plugin. Then, we’ll dig into the manual CSS method.

1. Use a WordPress tooltip plugin

The whole point of using plugins is to save you time adding a feature manually. With this in mind, Shortcodes Ultimate offers one of the easiest tooltip implementations for WordPress users.

Once you enable the plugin, you get access to dozens of shortcodes you can use to add anything from buttons, to sliders, image carousels, dividers, etc.

Tooltips are, of course, among the list of elements supported by Shortcodes Ultimate. Even better, every shortcode is fully customizable using built-in settings and CSS.

To get started, open the Block Editor for the page where you want to add your first WordPress tooltip. Then, look for the new Insert Shortcode button on any existing block’s menu:

Right away, you’ll see a list of available shortcodes. Select the Tooltip option:

Now you get the chance to customize your tooltip’s style. We’ve decided to go for a basic dark design and position it on top of the element you mouse over:

Scroll down until you reach the Tooltip Content field and enter the text you want the element to display:

Notice you can also configure the way your tooltip should behave. The default option will hide the container and text until you mouse over its parent element. You can also configure tooltips so they don’t show up unless you click on the parent element, but that tends to create a hassle for visitors.

Here’s what your new shortcode will look like within the Block Editor:

And if you preview this on the front end, here’s how the tooltip works:

Keep in mind, you can add tooltips almost anywhere you want using the right shortcode. This goes for regular text, tables, icons, and other elements.

However, as a rule of thumb, you want to add some visual indicator to let users know they should mouse over the parent element. Underlining or color variations work well. You can also use the information emoji (ℹ️).

2. Set up CSS hover tooltips manually

In the previous section, we talked about how to add hover tooltips using a plugin. The plugin essentially sets up multiple CSS styles for you. This means you’d choose from a list of settings, and the plugin generated the requisite shortcode.

However, there’s no reason why you can’t do this manually with code. The easiest way to add some new CSS classes to your theme is to use the WordPress Customizer.

To access the Customizer, navigate to Appearance > Themes from your dashboard and look for the Additional CSS tab at the bottom of the left-hand menu:

Next, add three CSS classes to your theme:

1. One for the tooltip container
2. Another for the text
3. A final one to hide everything

Here’s a basic example of what the code might look like:

.tooltip-box {
  position: relative;
  display: inline-block;
}
.tooltip-box .tooltip-text {
  visibility: hidden;
  width: 100px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 6px 0;
  position: absolute;
  z-index: 1;
}
.tooltip-box:hover .tooltip-text {
  visibility: visible;
}

In a nutshell, this code generates an empty container and sets its position relative to the parent element. Next, it adds some styling to the text you want to include, such as padding, alignment, color, and overall width. Finally, it sets the container to remain hidden until you hover over the parent element.

Once you save this custom CSS to your theme, you can call up tooltips from any page on your website. To do that, access the Block Editor for the page where you want to add a tooltip.

Select the block where you want to add your first tooltip and go for the Edit as HTML option:

Now, add a div that contains the parent text for your tooltip and the information you want it to contain:

<div class="tooltip-text">Parent text
  <span class="tooltiptext">Tooltip text here!</span>
</div>

Make sure to add the tooltip-text CSS class to your div. This is the CSS class that you added to your theme using the customizer. If you set a different name for your class, go ahead and change it.

Here’s what our tooltip looks like from within the editor:

If you save the changes to your page and head to the front end, you can see the changes:

Once you mouse over the parent text, the tooltip will show up:

That’s it!

Remember, you can style your CSS hover tooltips as you can other site elements. This means using different colors, modifying the container, and more, so they all fit with your website’s style.

To do that, you might need to learn some basic CSS. Codecademy has a good CSS course.

Conclusion

Adding WordPress tooltips to your site can help you improve your site’s user experience by including helpful information.

When it comes to adding CSS hover tooltips in WordPress, there are two approaches you can take:

1. Use a WordPress tooltip plugin that takes care of the setup for you.
2. Set up CSS hover tooltips manually using the customizer.

For some other ways to create a more user-friendly WordPress site, you can also check out our guides to improving WordPress navigation and removing clutter from your website.

Do you have any questions about how to customize your WordPress hover tooltips? Let’s go over them in the comments section below!

Free guide

5 Essential Tips to Speed Up
Your WordPress Site

Reduce your loading time by even 50-80%
just by following simple tips.

Keep reading the article at ThemeIsle Blog. The article was originally written by John Hughes on 2020-02-19 04:46:00.

The article was hand-picked and curated for you by the Editorial Team of WP Archives.