Providing information is the main function of a website. Yet, the space to display it is not limitless.
Of course, referring and linking to another site for more information is possible. But that could mean losing viewers.
A better way is to provide the additional information in new and innovative ways. The WordPress tooltip is one of those alternatives.
A tooltip, also known as a CSS hover tooltip, shows the visitor information when they move the mouse over a specific element.
Want to add tooltips to your WordPress as well? This guide shows how to add a tooltip in WordPress.
What is a WordPress or CSS Hover Tooltip?
A tooltip is a little textbox that appears when moving the mouse over an area on a WordPress site. These boxes are great for adding additional information about the field.
Moving the information to the box prevents the site from becoming overcrowded.
Some use them, for example, in pricing tables. The text gives a brief description and pricing.
By hovering over them, viewers reveal a detailed description of the item. In this way, the table is not crowded with too much text.
Other examples are word definitions, source crediting, comments, and maps. Basically, any elements can be moved to a tooltip box.
Others use a tooltip to give more information about a photo when hovering over it. This could include time, place, photographer, and much more.
The purpose is to make a point clearer or give more information.
Tooltips are also called glossary terms, hints, or messages. They are useful on mouse-driven computers and mobile WordPress websites and forms.
This is important to take into consideration. Much of the internet browsing nowadays is from a mobile device rather than on a desktop computer.
The space on the screen of a mobile device is much more limited than on a big computer screen. Tooltips are the answer to that problem.
However, take care not to put too much information in the tooltip either.
There are two ways to add a tooltip to a WordPress website. This article will discuss both methods.
First, the use of plugins is reviewed, and then the manual method. The manual method involves a little bit of coding.
Add a WordPress Tooltip with a Plugin
The advantage of a WordPress plugin to add WordPress tooltips is that they save time. So, here is a list of five tooltip WordPress plugins that are easy to use.
Shortcodes Ultimate
The first tooltip plugin is Shortcodes Ultimate. It is simple to use and is compatible with most of the popular WordPress themes.
It does more than add tooltips to WordPress. In fact, it offers more than 50 shortcodes for a variety of functionalities, all for free.
WordPress Tooltips
WordPress is easy to use. It is small, light and fast.
It is a jQuery solution that adds HTML content in the WordPress editor, WYSWYG. Among other things, it adds audio, download links, images, PDFs, social media connections, and videos.
Glossary
Glossary automatically generates word lists based on the content of a website. It groups the words and definitions in a dictionary.
The words and definitions are then linked to the words in the copy. Then it creates the tooltip glossary for it.
WordPress Tooltip
This allows users to add tooltips to plain text and corresponding links on the post or website. It uses the TinyMCE shortcode graphical user interface.
It guides the user through the whole process. So extensive knowledge of coding is not required.
Simple Tooltips plugin
This simply adds an extra button to the post editor. Clicking this button inserts a tooltip shortcode into the content.
Then users add content to the tooltip and assign the element that triggers the tooltip.
Next, the focus shifts to the manual CSS method.
Manually Add a WordPress Tooltip
The previous section discussed the use of a WordPress plugin to add tooltips to a WordPress site. What plugins do behind the scenes is to set several CSS styles.
It then allows the user to choose from a set of settings to customize the tooltip. The plugin will then generate the shortcode.
Of course, it is possible to perform all these tasks manually. It does require advanced knowledge of HTML and jQuery.
When the code is already generated it is only a matter of adding this.
The additional trick is the addition of CSS to the theme. The easiest way to do this is by using the WordPress Customizer.
Go to the Theme Customizer
- Open the WordPress dashboard.
- Click Appearance. It is in the main menu on the left.
- Then click Themes.
- Find the currently active theme.
- Press Customize. Now WordPress will open the Theme Editor.
- Click Additional CSS at the bottom of the screen.
- Add three new CSS classes to the theme:
- For the tooltip box
- For the text
- For hiding everything
Add CSS classes to the theme
This is what the three CSS classes need to do:
- Defines the tooltip container and its position in relation to the parent text.
- Defines the alignment, color, size, etc., of the text in the tooltip box.
- Controls when the text is hidden and appears when hovered over.
This code that does these things will look something like this:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted
black;}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;}
.tooltip:hover .tooltiptext {
visibility: visible;}
These strings of code generate an empty box and position it relative to the parent text. Then, it makes up the text and defines parameters like alignment, color, and padding.
The final part hides the box until it needs to appear when hovered over the parent element.
Add tooltips using Block Editor
After adding the CSS classes to the theme, be sure to save them. Now the WordPress tooltips are ready to add to the WordPress sites.
To add them:
- Go to the Block Editor for the page where the tooltips need to go.
- Select the parent text where the WordPress tooltip needs to appear.
- Set the HTML option to Edit.
- Add the text for the tooltip and other information that should appear in the tooltip box:
<div class="tooltip-text">Parent text <span class="tooltiptext">Tooltip text here!</span> </div>
- Add the tooltip-text CSS class to the div. That is the CSS class added with the customizer in the previous step.
Change the name if it received a different name when it was added.
- After entering all the HTML code into the correct block, click Update.
- Make sure that everything works by going to the website.
Style the WordPress tooltips in the same way as other CSS elements.
Change the color, customize the box, and so on. Make it fit in with the rest of the website design.
Ending thoughts on adding WordPress tooltips
WordPress tooltips are great for adding extra information, without cluttering the visual appearance.
If a visitor does not hover over a particular element of the website, the information is not visible. This adds to the user experience.
The clean and uncluttered appearance is becoming more and more important. More people use mobile devices to browse the internet.
On a small screen, popups are very annoying.
On the other hand, visitors appreciate tooltips. They appear when needed and inform instead of trying to sell.
The two approaches to add tooltips to a WordPress site that this article discussed are:
- The use of WordPress plugins. The tooltip plugin sets up the tooltip for the user.
- The manual setup of the WordPress tooltip.
This requires the addition of three CSS styles to the theme. The guide showed how to use the customizer to do this.
If you enjoyed reading this article on adding WordPress tooltip, you should check out this one on how to delete WordPress themes.
We also wrote about a few related subjects like how to watermark images, how to check the WordPress version, creating a comparison table with WordPress plugins, how to upload an HTML file in WordPress, where are WordPress pages stored and why is WordPress so hard to use.
