What's WP
Find Everything Related to WordPress - Best Tutoriasl on WordPress!
How to Add Tooltips in WordPress Posts and Pages?

How to Add Tooltips in WordPress Posts and Pages?

Tooltips, as you may know, are small bubbles that contain some extra information about the items being hovered over on a web page. In recent days, they are widely used by webmasters as a handy tool to promote the blog readership and traffic.

To deepen your understanding of tooltips, we will brief their potential benefits at the very beginning of this article. In the following parts, then, we introduce a simple method to help you add tooltips in your WordPress posts and pages.

Why Need Tooltips on Your WordPress Site?

The general answer to this question is tooltips help you make the site contents more reader-friendly, which in return improves your site visibility. To be more specific, you can use tooltips to explain the meaning of a rough word or phrase. Also, you can use them to display more information about an image, a hyperlink, and so on.

Adding a tooltip may be not a big deal compared with other site promotion methods like embedding social media sharing buttons. However, it is indeed a good practice to show users your care in the trivial details.

How to Integrate Tooltips with WordPress Posts and Pages?

After a brief review on the tooltips’ benefits, let’s move to the sections below to see how you can add them to your site. Since WordPress comes with a tremendous number of amazing plugins for extending functionality, there is no need to bother yourself with complicated coding or programming stuff.

In this case, we have selected a popular one named as Simple Tooltips from WordPress plugin directory. The plugin is quite easy to use. It adds a button to a post or page editor, enabling you to insert the tooltip shortcode into the content. Check the following steps to see how we will use this plugin.

Step 1 – Install the Simple Tooltips plugin

First of all, you need to install the Simple Tooltips plugin. Since it is freely available, you can download it directly to your dashboard. If you have encountered any problems during this process, refer to our tutorial of installing WordPress plugins for a step-by-step guide.

Install the Simple Tooltips Plugin

Step 2 – Configure the plugin settings

Once you are done with the operation above, a new item, namely, “Simple Tooltips”, will be accessible under the “Settings” sidebar menu. Navigate to this item to enter the plugin setting page.

Plugin Setting page

As you can see from the screen capture above, there are multiple options provided for you to configure how the plugin will work on your website. Firstly, you can change both the background color and text color of the tooltip to make it visually coordinated with your theme.

Secondly, you are able to set the maximum width, opacity level, and position of the tooltip to further style the way in which it will be displayed. What worth mentioning here is the tooltip’s position is relative to the trigger element that will be detailed in the next section.

Besides, the plugin allows you to disable tooltips for mobile users with a simple click. This feature helps to prevent readers who access your website via mobile devices from being frustrated by some displaying errors of the tooltips. What’s more, it grants you with the ability to display tooltips on your WordPress menus by entering the related CSS selectors.

Step 3 – Embed a tooltip in posts and pages

After finishing the plugin configuration process, you can now add tooltips in WordPress posts and pages. Since the operation of adding tooltips to a post is the same as that of a page, we will focus on describing how to embed a tooltip in posts for brevity purpose.

To get started, you should open up the editing screen of an existing post or a new post. Then, select the visual tab and you will see a new icon titled as “Add a Tooltip” on the right side of the toolbar menu. Click on this icon to insert a tooltip shortcode into the post content.

Insert the Tooltip Shortcode

Displayed as above, the shortcode contains two main parts, including the tooltip content and the trigger element. The former part is the message that you want to show your readers in the tooltip bubble, which can contain both texts and images. The latter part, on the other side, refers to a certain item of your post content. By hovering over this item, readers can see the information that you want to share with them in the tooltip.

Step 4 – Save changes to see the tooltips in action

When you have customized both the content and trigger element of the tooltip, the last thing to do is publishing the post to save all your changes. Then, you can visit your site to see the tooltip functioning as below.

Tooltip in Action

On the Bottom

From the illustrations above, the utilization of the Simple Tooltips plugin makes it fairly easy to integrate a tooltip with WordPress posts and pages. All you need to do is inserting the shortcode and making some simple configurations. Therefore, by carefully introducing this method, we hope that you can take advantage of tooltips with ease on your website.


Zoe is a freelance writer who has a deep knowledge about WordPress. She loves everything related to website building and loves to share her experience with people all over all the world. In the daily life, Zoe loves detective novels as it can train her logical thinking and creativity.