How to Add a WordPress Tooltip in 3 Ways: Free Plugin or CSS

There are times when you need to give your website visitors more information, but including it directly on the page doesn’t make sense. One possible solution is to include a link to somewhere else that contains the information. However, in many cases, this isn’t necessary. Instead, what you can do is add a simple WordPress tooltipTooltips are sometimes also called CSS hover tooltips and this is an example of one. that displays the information when visitors hover over a piece of text or an emoji.

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.

Three 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 two manual CSS methods.

The first one can be used with either block themes or classic themes (as long as you are using the default Gutenberg editor), while the second one works with classic themes (or hybrid themes) that have access to the WordPress Customizer.

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 tooltips manually using the custom HTML block 👨‍💻

In the previous section, we talked about how to add tooltips using a plugin. The plugin essentially sets up multiple CSS styles for you. This means you choose from a list of settings, and the plugin generates 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 custom HTML block inside the block editor.

To begin, simply click the plus sign to add a new block wherever you want the tooltip to go. Then in the search bar type in “html” and select the Custom HTML block:

Once you’ve added the block, copy and paste the following code into the block:

<h3><span id="tooltipText" class="tooltip">Replace this with the on page text you want to show<span class="tooltiptext">Replace this with the tooltip text you want to appear on hover.</span></span></h3>

<style>
.tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
  border-bottom: 1px dotted #4267cf;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: #555;
  color: #fff;
  text-align: left;
  padding: 10px;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -100px;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 16px;
  line-height: 1.5;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>

This is an example of what it might look like on the back end:

Which will then render as this on the front end:

You can also tweak the CSS code snippet in various ways to adjust the aspects of it that you wish to change. A lot of them are self-explanatory, but if you’re not used to working with code it can feel intimidating.

For example, near the bottom, you have font-size: 16px; which is what it’s set at right now, but you can change it to whatever font size you’d like. Underneath that, you also have line-height: 1.5;, which is the space between each line of text in the tooltip. You can edit that as well.

For your convenience, here’s the snippet again, but this time in a regular paragraph format with a brief note next to each line that explains what it does. This should make it easier for you to adjust to your liking:

Another important thing to note are the <h3> tags at the start of the snippet. The <h3> specifically denotes a heading level, but if you wish to have your tooltip be a normal paragraph, then you’ll want to swap the <h3> and the </h3> with <p> and </p>.

Adding text before or after the tooltip

One thing you might be wondering, which is not shown in the example above, is how to include text either before or after the target text – the target text being the text that triggers the appearance of the tooltip when it’s hovered over.

If you want the additional text to be all part of the same continuous string of text (e.g., like in a regular sentence) then include it inside the tags that denote what type of text it is. So in this case it would be the <h3> tags:

Which will then look like this on the front end:

If you want to add text before or after, but you want it to be separated from the target tooltip text, then you’d simply add a text or heading block before or after the Custom HTML block.

And that’s it. Pretty simple, right?

Now let’s look at one final way to do this, which also involves adding custom CSS but this time via the Customizer.

3. Set up tooltips manually using the Customizer 👨‍💻

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

⚠️ If you do not see this and instead see the option for Editor when you go to Appearance, then it means you are using a block theme. In other words, this won’t work, but you can use the second method above.

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: 200px;
  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>

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

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

For additional options 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!