Steps to Add WordPress Tooltips for Your Blog Posts and Pages

Steps to Add WordPress Tooltips for Your Blog Posts and Pages

To put it simply, the tooltip is a small popup or hover box that will showcase when people hover their cursors over an item on your website. The items can be the icons, buttons or even the text. When your readers hover on any item without a click, the tooltip will explain it in the real-time. For example, the explanatory text can be the introduction of a jargon or the function of a special button. Frankly speaking, the tooltip is a great way to showcase a large amount of useful information in a concise way. In this case, the usage of it is popular in a lot of WordPress projects. However, as WordPress does not support the feature of tooltip by default, you can check the following steps to add WordPress tooltips for your blog posts and pages.

Here, we need to mention that the tooltip function has been supported by many premium WordPress themes. Thus, before carrying out the below steps, you should check out your theme features. If your current theme already allows the showcase of the tooltip, there is nothing you need to do.

Method 1 – Use the CM Tooltip Glossary Plugin

The CM Tooltip Glossary plugin is a simple WordPress tooltip plugin. It can create the glossary for any item on your website easily. And also, this plugin can display the responsive tooltip whenever people hover over your targeted terms. Note that there is no limitation on the amount of tooltips you are going to generate.

Upon the plugin installation, you should enter the plugin settings screen to set up several aspects.

  • General settings – Here, you can enter the ID and permalink for the glossary index page. And also, you need to decide whether to highlight all the terms on your posts or only highlight the first occurrence. If you want, you can even determine whether to showcase the terms on your homepage, authors’ pages and some taxonomy related pages.
  • Glossary index page – From this part, you can choose to style all the glossary index pages in a different manner. In addition, you can choose to display the glossary index page as tiles, along with the proper tile width.
  • Glossary terms – If you want, you can remove the link to your glossary term page.
  • Tooltip – To enable the tooltip feature, you should check the box of showing tooltip when users hover over the terms. In addition, you can use the term excerpt for hover, limit the exact tooltip length, remove the extra characters or spaces from the tooltip text and avoid the parsing protected tags.

CM Tooltip Glossary Settings

Add the New Glossary

Now, you can click the Add New button from the CM Tooltip Glossary tab. Here, you should enter the glossary title that will appear on your post content. And then, you need to provide the explanation you are looking to provide.

Note that all the glossaries you have created can be found from the glossary listing page.

Glossary List

And now, when your glossaries appear in the web content, people can learn the items simply by hovering over the targets.

Tooltip Example

Method 2 – Use the WordPress Tooltips Plugin

In fact, the WordPress Tooltips plugin works the same way as the first option we have recommended. However, this one is more useful when it comes to the content of the tooltip explanation. With this plugin, you can also showcase some images just like the following example.

Tooltips Image

In addition, you can click the Tooltips > Global Settings button to enable the below two extra features.

  • Add the tooltips to all the matching keywords or just the first one in the same page.
  • Enable the tooltip feature for your images, posts tags and post excerpt.

Even, when creating the new tooltip, you can enter some synonyms for the keywords or glossaries.