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.
In this article, we’ll show you some of our favorite examples of tooltips in action. Then we’ll teach you how to add them to your website with and without plugins.
Let’s dive in! 🌾
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.
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.
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 (⚠️).
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:
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:
<style>
.tooltip {
position: relative; /* Positions the tooltip text in relation to this element */
display: inline-block; /* Allows the span to fit the content size and enables positioning */
cursor: help; /* Changes the mouse cursor to a help icon when hovered */
border-bottom: 1px dotted #4267cf; /* Adds a dotted underline to indicate interactivity */
}
.tooltip .tooltiptext {
visibility: hidden; /* Keeps the tooltip text hidden until hovered */
width: 200px; /* Sets a fixed width for the tooltip box */
background-color: #555; /* Dark background for the tooltip text */
color: #fff; /* White text color for readability */
text-align: left; /* Aligns text inside the tooltip to the left */
padding: 10px; /* Adds space inside the tooltip around the text */
border-radius: 6px; /* Rounds the corners of the tooltip box */
position: absolute; /* Positions the tooltip text absolutely within the relative parent */
z-index: 1; /* Ensures the tooltip is above other content */
bottom: 150%; /* Positions the tooltip above the trigger element */
left: 50%; /* Centers the tooltip over the trigger element */
margin-left: -100px; /* Adjusts the horizontal position to truly center it */
opacity: 0; /* Starts the tooltip as transparent */
transition: opacity 0.3s; /* Smooth transition for the tooltip to fade in */
font-size: 16px; /* Sets the text size within the tooltip */
line-height: 1.3; /* Controls the spacing between lines of text */
}
.tooltip:hover .tooltiptext {
visibility: visible; /* Makes the tooltip text visible on hover */
opacity: 1; /* Tooltip text becomes fully opaque (visible) */
}
</style>
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>.
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.
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:
👉 Here’s a basic example of what the code might look like:
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:
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.
Adding WordPress tooltips to your site can help you improve your site’s user experience by including helpful information.
To recap, you can do it in three different ways:
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!
FREE GUIDE
4 Essential Steps to Speed Up Your WordPress Website
Follow the simple steps in our 4-part mini series and reduce your loading times by 50-80%. 🚀
John is a self-taught WordPress designer and developer. He has been working with the CMS for over a decade, and has experience operating as a freelancer and as part of an agency. He’s dabbled in everything from accessible design to website security. Plus, he has extensive knowledge of online business topics like affiliate marketing.
John is a self-taught WordPress designer and developer. He has been working with the CMS for over a decade, and has experience operating as a freelancer and as part of an agency. He’s dabbled in everything from accessible design to website security. Plus, he has extensive knowledge of online business topics like affiliate marketing.
👋 Don’t miss out on the latest news, tips, and insights to help you build better websites. Delivered to your inbox once a week.
NEW COURSE
Learn to build high-value block themes and plugins with AI and automation
Recent Posts
Popular Posts
#Trending
Our Network
Company
Starting a blog without spending a penny is entirely possible, and you’re in the right place to learn how. Over the years, I’ve tried dozens of blogging sites to see how well they work for different purposes and needs. This post shares my …
Ready to create a WordPress blog? You’ve made an outstanding choice! Learning how to start a blog can be your path to an exciting new adventure. Lucky for you, WordPress is an excellent tool you can use for that. It’s free, user-friendly, powerful, …
In this tutorial, we will lead you through all the steps you need to take in order to start a personal blog that is cheap, effective, good-looking, and that will set you up for future success. This is your ultimate guide to a personal WordPress blog …
Building a website with WordPress might seem overwhelming at first, but it’s easier than you think. You don’t need to be a developer or have any design experience to create a site that looks great and works …
The web host you choose to power your WordPress site plays a key role in its speed and performance. However, with so many claiming to offer the fastest WordPress hosting out there, how do you decide which company to use? In this post, we’ll look at …
Here’s how I set up WordPress on my own computer, with no web host, no risk, no cost, and nobody watching. The tool I use for this is called XAMPP. It basically makes your laptop act like a real server – albeit just locally. You can run WordPress on …