How to Add Tooltips to WordPress

How to Add Tooltips to WordPress

As a website owner, there will be times when you may need to convey additional information to the people visiting your website, but you will not have enough space on the page to do so. Yes, you are free to attach links to other websites; however, the most time-efficient alternative would be to add tooltips to your WordPress site that shows visitors all of the information they require.

Already curious? Let’s learn what the tooltips are and how to add tooltips in WordPress.

What is a Tooltip?

You might have seen on certain sites that a pop-up box appears to provide additional information whenever a user hovers over a site element. That pop-up box with additional info is called a Tooltip. The purpose of the tooltips is to provide visitors with additional information regarding the element they are presently hovering over. We can add tooltips to almost anything, including text, forms, buttons, images, GIFs, and video clips, to name a few.

Let’s say you decide to add tooltips to some of the images on your site. Such a tooltip might display a variety of information, including the name of the picture, the date the picture was taken, the identity of the photographer who took the picture, and the place where the picture was taken. The objective is to either inform the visitor of previously unknown information or make the main idea clear without taking up any additional room.

Why Should We Add Tooltips to WordPress?

Tooltips in WordPress are rarely used despite the fact that they can be helpful in a variety of contexts. As discussed earlier, a tooltip is an additional piece of information that appears when you hover the mouse over a specific region. Typically, tooltips take the shape of floating containers. The information contained in the tooltip ought to be clear and precise. WordPress tooltips are, as a general rule, the best option for clarifying words and expressions in situations where a link to another site would not add any value to the user.

If you add tooltips to WordPress, you can get many benefits, including:

  • More information in lesser space
  • Show media attachments in the middle of a paragraph
  • Showing the synonym or meaning of a word
  • Clarifying the jargon used in your writing
  • Making remarks, puns, and jokes without hindering the flow of the paragraph

By now, we have learned about tooltips and their benefits. Let’s move on to learn the methods to add tooltips in WordPress to improve your user experience.

How to Add Tooltips to WordPress

There are two methods widely used to add tooltips in WordPress. One is the use of a plugin to insert the tooltip automatically. The second one is to use Custom CSS to write custom style code and add it manually to add tooltips at your desired location. We will start with the first one.

1. Using Shortcodes Ultimate Plugin

There are many plugins available in the WordPress library to add tooltips to WordPress. Shortcodes Ultimate is one of the top choices among the lot. So, we will be using Shortcodes Ultimate in this tutorial. First, let’s have a sneak peek at its capabilities.

Shortcodes Ultimate to add Tooltips

Shortcodes Ultimate contains a large collection of decorative and functional elements that you can use in the post editor, text widgets, and even template files. Shortcodes Ultimate makes it simple to create customizable tooltips, unique buttons, multiple tabs, featured content sliders, and carousels, among many other valuable items. The main idea behind this wonderful shortcodes plugin is to get people to use these items without any prior coding knowledge. Shortcodes Ultimate comes with many features, including:

  • 50+ lovely shortcodes, including Tooltips
  • Quickly add shortcodes with a single click and see the results in real-time.
  • Gutenberg-ready
  • Ready for almost all themes
  • Comes with a CSS Editor
  • Supports RTL
  • User-friendly interface

Now let’s learn how to use the Shortcodes Ultimate plugin to add tooltips to WordPress. To do so, we first need to install and activate the plugin from the WordPress plugin library.

Install Shortcodes Ultimate Plugin

To get started, navigate to your WordPress Dashboard and the Plugins option. When the side menu appears, click on Add New. From here on, we have a couple of options to install the plugin; upload the plugin manually or install it via the WordPress plugin repository.

Option 1: Uploading and Installing the Plugin Manually

Go to the developer’s website and download the plugin as a zip file. Now, head over to the Plugins menu inside your WordPress website. Click on the Upload Plugins button, and it will reveal a field to upload a file. Simply click the Choose File button, browse through your computer, select the plugin you downloaded in the previous step, and upload it.

Once the plugin is uploaded, the Install Now button will become available. Click on the Install Now button to install the plugin. After the Shortcodes Ultimate plugin has been successfully installed, you will need to activate it by pressing the Activate button.

Option 2: Install the Plugin via WordPress Plugins Repository

WordPress comes with a rich plugin library that potentially has any plugin you are looking for. With the WordPress plugins repository, you will get access to each and every one of the best plugins. So, in this method, we will use the WordPress plugins repository to install the Shortcodes Ultimate plugin in the easiest and most expedient manner.

To install the Shortcodes Ultimate plugin, go to your WP Admin Dashboard and navigate to Plugins > Add New. Type Shortcodes Ultimate in the search bar in the right corner. It will reveal a list of plugins matching your search query. Now look for the Shortcodes Ultimate plugin and click on the Install Now button to install the plugin. Once the plugin is installed, the button will change to Activate. Click on the Activate button to finally activate the plugin on your site.

Shortcodes Ultimate to add tooltips

That’s it. You have now successfully installed and activated the Shortcodes Ultimate plugin on your WordPress site. Now, let’s see how to add tooltips to the WordPress post.

Add Tooltips to WordPress Using Shortcodes Ultimate

To begin, navigate to the page or post where you want to add your first WordPress tooltip and open the Block Editor. Then, on any existing block’s menu, check for the new Insert Shortcode button:

Shortcodes Ultimate icon to add tooltip

As soon as you click, a list will pop up, which will include a ton of shortcodes available. Choose Tooltip from the menu.

Menu to add tooltip

Once you click Tooltip, a menu will appear to customize the tooltip according to your need and liking. You can select the color, font, and size, as well as the tooltip behaviour. The container and text will be hidden by default until you hover over its parent element. You can also configure tooltips such that they don’t appear unless you click on the parent element. However, this can be inconvenient for visitors.

Tooltips behavior

Now in the Tooltip Content box, type the content which you want to display when you hover the mouse over to the destined words.

And in the Content box, you can type the words which will display the tooltip when the cursor comes over them. And then click Insert shortcode.

Once you click Insert shortcode, the shortcode will be added to your page, and your tooltip will become live. Your front end will look something like this:

In this way, you can add and customize the tooltip in WordPress within a few steps using the Shortcodes Ultimate plugin. Now, we will move on to the second method of custom CSS.

2. Using Custom CSS

In the last part, we discussed using a plugin to add tooltips to a WordPress site. Behind the scenes, the plugin basically creates numerous CSS styles for you. This means you’d select a setting from a menu, and the plugin would generate the necessary CSS code.

There’s no reason why you can’t do it manually with code. The WordPress Customizer is the simplest way to add new CSS classes to your theme. To add custom CSS to

WordPress, navigate to Appearance > Customize to open the Customizer.

From the theme customizer, click on Additional CSS. This will open up a new menu where you can add your own custom CSS code.

Additional CSS to add tooltips in WordPress

 

Here we will add three new CSS classes, each for a different purpose.

  • The first one is to add a tooltip container.
.tooltip-container {
position: relative;
display: inline-block; }
  • The second one for our text that is to be displayed
.tooltip-container .tooltip-hover-text {
visibility: hidden;
width: 80px;
background-color: dark-gray;
color: #ffffff;
text-align: center;
padding: 2px;
position: absolute;
z-index: 1; }

In this code, you can change the settings, like the text dimensions, color, alignment, position, etc.

  • The third one is to hide the tooltip in the normal instance.
.tooltip-container:hover .tooltip-hover-text {
visibility: visible; }

You can access tooltips from any page on your website after saving this custom CSS to your theme. To do so, go to the Block Editor for the page where you wish to add the tooltip. Choose Edit as HTML for the block where you want to add your first tooltip:

Edit as HTML to add tooltips

Here we need to add the div, which will contain the parent text and the information you want the tooltip to display. Replace Parent text with your required text and Tooltip text here with the information to display. We will use the exact words as before. So, in our case, Parent text = Shortcodes Ultimate and Tooltip text here = The best tooltips plugin.

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

Once you save the changes and move to your front end, the tooltip will appear once you hover the cursor to the parent text.

Conclusion

Tooltips are essential tools, especially for blog sites and online stores. They help you provide more information or quick links without consuming any real estate or word count. Unfortunately, tooltips are not inherently available in WordPress. In order to add tooltips in WordPress, you have two options. One is to install a plugin, and the second is to use Custom CSS.

In this article, we learned how to add tooltips to WordPress. We started off by looking at what tooltips are and why we should add them to our site. After that, we saw in detail how to add tooltips using the Shortcodes Ultimate plugin. Lastly, we also looked at custom CSS snippets to add tooltips to our WordPress site. Whichever way you choose, it will surely add to the ergonomics and versatility of your site.

I hope you liked the article. Let us know if you tried adding tooltips to your website and how your experience was. Share your thoughts in the comments below.

Meanwhile, if you found the guide helpful, here are some other posts you might find interesting: