How to Add Tooltips to WordPress – The Complete Guide

WordPress tooltips are sparsely used, but they are beneficial in many situations. The WordPress tooltip is an extra bit of information—usually floating containers—that appears when the mouse hovers over an area. The tooltip content should be explanatory and precise. As a general rule, WordPress tooltips are the best choice for explaining words and expressions where a link to another resource wouldn’t bring value.

WordPress tooltips are useful in situations like:

• providing the meaning of an acronym;
• shortly defining a jargon term;
• adding a relevant remark;
• highlighting crucial information;
• making a short joke.

In this context, tooltips are an excellent solution for content-heavy websites. WordPress tooltips are easy to incorporate into your site. You can add tooltips manually, but also with the help of plugins. The tooltip content doesn’t need to be strictly text—you can add images, videos, and even QR codes. Are you curious about tooltips? Here is everything you need to know to become a master of tooltips.

How to Add WordPress Tooltips Manually

You have to write a few lines of CSS code to generate a hover tooltip on your website. Non-coders have plenty of plugin alternatives but learning how to add tooltips manually isn’t rocket science. Webmasters with basic HTML and CSS knowledge can do it. Before anything else, you should visit W3School explanations about CSS tooltips. Don’t skip the exercises because practice is the key to learning to code.

From your WordPress admin dashboard go to Appearance > Themes > Additional CSS. Some themes might have a different name for “Additional CSS,” like Custom CSS/JS as Ocean WP does.

If you can’t find the section for adding custom CSS code, check with your theme provider’s customer support.

You have to add three CSS classes:

• The first one is to create the tooltip container and define the position in relation to the parent.
• The second is to format the text within the container.
• The third is to hide the tooltip until the mouse hovers over the parent.

The CSS code should look like these snippets:

/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}
The .tooltip class sets up the position of the container (relative to the parent) and the display modality – inline-block. Instead of going for a relative position, you can go for fixed, but it will look awful on small screen sizes. Next, display:inline-block allows you to determine the weight and height of the container. However, you are free to experiment and choose whichever behavior you want!

/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 100px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
position: absolute;
z-index: 1;
}

It’s crucial to make sure that the text is hidden and the container size isn’t too big, as this would affect the reader’s experience. You are free to add other styling properties, like background-color, border-radius, or text-align. But user experience should always be your number one priority.

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}

These lines of code are responsible for displaying the tooltip in WordPress when users hover over the text. Save your work, go to the block editor, select the block you want to add the tooltip, and go for “Edit as HTML”. Add the following code:

<div class=”tooltip “>Parent text

<span class=”tooltiptext”>Tooltip text</span> </div>

Make sure to replace “Parent text” with the text to display the tooltip on hovering and “Tooltip text” with the tooltip content. That’s all—you have just added the first tooltip manually.

As you see, adding tooltips manually isn’t rocket science. Let’s take a look at the best plugins to add tooltips in WordPress.

IMPORTANT: This code might not work due to your theme styling. Ideally, try adding tooltips manually on a staging site and make sure that it works. Next, go to your website and apply the same algorithm.

Plugins to Add WordPress Tooltips

Plugins are a working solution if you don’t want to add code to your website yourself. Some are more complex, while others are pretty basic. Premium plugins come at reasonable prices, but a few suggestions are free of charge. Carefully check out the following plugins to add WordPress tooltips.

Shortcodes Ultimate

This plugin does a whole lot more than generating hover tooltips. It’s a collection of 50+ shortcodes to enhance your website. Accordion, Posts, Tabel, QR Code, Tabs, Image Carousel, Panel, Pricing Table, Parallax section, and Tooltips are just a few shortcodes included in Shortcode Ultimate.

Inserting a shortcode is simple and intuitive. Head to your WordPress admin dashboard, open the post or page to add the tooltip, go to the block editor, and look for the Insert Shortcode button. Click on this button and it will display a list of shortcodes, including Tooltips. Select it to configure the parent text and the container position.

Shortcodes Ultimate is free to download, but you have to pay for add-ons that come with extra functionality. Luckily, you don’t need to purchase a premium add-on to add WordPress tooltips.

Tooltips

This is the most complex WordPress Tooltips plugin and its name says a lot about its purpose. You can confidently use this plugin to add tooltips to your WordPress website. Start testing the potential of this tooltip by installing the free version from the WordPress repository. The premium version is quite affordable, and you get good value for your money.

You can add a tooltip sitewide for a specific keyword. You can also specify the parent keyword and a tooltip will appear everywhere that keyword appears on your website. Alternatively, you can add a tooltip to a parent keyword only once. The plugin allows adding tooltips to the text of the posts and pages, but also in archives, tags, menu items, and titles. It’s no exaggeration to say that this plugin inserts tooltips anywhere. On top of that, these include everything you want—text, video, images, and even a QR code. Check out the demos on the plugin’s website to better understand it.

WordPress Tooltip Glossary

This plugin is golden for webmasters running wiki sites, encyclopedias, knowledge bases, and dictionaries. It automatically creates a glossary of terms and you may enable/disable tooltips for the terms.

The plugin has a large set of customization options for the glossary page. It has a bunch of template layouts and an effective filtering system. The design and the text within the tooltip are entirely customizable. However, be careful that tooltips may impact the user experience, so don’t go too far with the design.

Check out the WordPress plugin repository to get the free version of the plugin. It has a pretty wide range of features and it’s more than enough to add tooltips.

Tooltip CK

Tooltip CK is what you are looking for if you need a simple WordPress tooltip plugin. It’s lightweight, so it won’t impact the site loading speed. Yet, it has enough features to deserve your attention. Sadly, the free version doesn’t let you choose the position or the effects of the WordPress tooltip. The premium plugin is reasonably priced and it comes with a lifetime license.

The simple and intuitive interface allows you to customize the tooltips and match them to your site design. Even less-techie users will manage to craft awesome tooltips in WordPress. Tooltip CK is mobile and touch-friendly, so you can use it for all types of screen sizes.

Tooltip for Elementor

Are you such a big fan of Elementor that you can’t live without it? This Elementor add-on is what you need to create cool hover tooltips. It’s part of a huge and massively used collection of add-ons to spice up Elementor functionality.

You can fully customize the tooltip content—icon, image, video, or text, the design of the tooltip (height, width, position), and the hovering effects. It’s simple to use and it might be that little spark needed to catch users’ attention.

CSS3 Tooltips

Complex plugins that slow down a website are a nightmare for any webmaster. Lightweight plugins that do a task completely are a working solution. This is true of the CSS3 WordPress Tooltips plugin—it’s lightweight, simple to use, and includes an unbelievable set of features. It doesn’t have a free version to test the basic features, but the price is acceptable for most budgets.

Even though the developers used only CSS effects to avoid impacting the speed, you have plenty of customization options. 10 types of positions, 50 tooltip styles, on-hover and on-click effects, adjustable tooltip delay, and support for multimedia are worth-mentioning features of the plugin.

WordPress Tooltips Ultimate & Image Hotspot

This plugin is for anyone who wants to create original tooltips. It comes with tons of options to style the design of the tooltips. Despite its complexity, creating a tooltip is a real pleasure. You get to choose styles, effects, animations, and designs from drop-down menus.

The number of alternatives is really impressive. Immediately after you finish the configuration work, your tooltip will improve the readers’ experience.

Special Mentions: Tooltips for Contact Forms and Pricing Plans

WordPress Tooltips may be of crucial importance for contact forms and pricing plans. The priority of a webmaster is to ensure that users won’t face any issues when using contact forms or pricing plans. The tooltips may provide simple and concise explanations to make sure that the user understands what they should do. The most frequently used forms have add-ons, like Gravity Forms, or plugins, like Contact 7, in this respect. It’s simpler in the case of pricing plans because the huge majority of WordPress tooltips plugins work with them by default.

Depending on the complexity of the forms or pricing plans, a tooltip may be a small detail that makes a huge difference.

Over to You

You now have a good idea of WordPress tooltips after reading this article. It’s easy to add them manually, but even easier with the help of plugins. You don’t have a rich offering of WordPress tooltips plugins, but the above recommendations should be more than enough for your needs. Did this article pique your interest in using WordPress tooltips on your site? We are eager to hear your opinions on them.