How to Add Custom Tool-tips to a WordPress Without and With Plugin

Do you want to add Tooltips to your WordPress website, we can try to solve and create, Tooltips are little boxes that pop up when you hover over an area on your WordPress site.

What’s a Tool-tip in WordPress?

A tool-tip is often used to specify extra information about something when the user moves the mouse pointer over an or touches (on mobile devices) an element on your WordPress website. And in your WordPress website, Tool-tips can be used to add extra information.

For example, take a look at the WordPress-tool-tip-screenshot.

wordpress-tooltip-install

There is two type to install Tooltip:

  • Installing a WordPress Tooltip Without Plugin
  • Installing a WordPress Tooltip With Plugin

Installing a WordPress Tooltip Without Plugin

That is very easy to install to Tool-tip to WordPress website without Plugin, easily to add a Tooltip to your WordPress site, you’ll need a basic of HTML, CSS and use of WordPress Dashboard no need to hire a developer you can do it very easy.

Login to you WordPress Dashboard » Appearance » Theme Editor

Now click – I understand (style.css) , scroll down and paste this code

.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: max-content;
background-color: #444444;
color: #fff;
text-align: center;
padding: 5px 8px;
border-radius: 3px;
font-size: 12px;
margin-left: 10px;
position: absolute;
z-index: 1;
}
.tooltip .tooltiptext:before {
content: '';
position: absolute;
width: 6px;
height: 6px;
top: 8px;
left: -4px;
background-color: #444444;
border: 1px solid rgba(0,0,0,.1);
border-left-color: rgba(0,0,0,0);
border-bottom-color: rgba(0,0,0,0);
transform: rotate(45deg);
}
.tooltip:hover .tooltiptext {
visibility: visible;
}

Save update and ready for next steps

<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>

This is HTML code you can paste it on your post, page and also manually, work fine you WordPress website, easy and simple.

Installing a WordPress Tool-tip With Plugin

Let’s take a look at the step by step guide on how to add Tool-tip in WordPress:

Step 1: Install the Short-codes Ultimate Plugin

Click here to go to WordPress and download the free Short-codes Ultimate plugin.

OR Plugins » Add New, search for Shortcodes Ultimate, and click Install Now.

search for Shortcodes Ultimate

WordPress download the free Short-codes Ultimate plugin, Once the plugin is activated, you’re ready to start using it.

Step 2: Get Your Tool-tip Shortcode

Now, find the Short-codes Ultimate plugin on the left-hand side of your WordPress dashboard and click on Available short-codes. Scroll down that page and select the Tooltip button.

Tooltip button

find the Short-codes Ultimate plugin on the left-hand side of your WordPress dashboard . On the next page, highlight and copy the short-code:

highlight and copy the shortcode

Add your Tool-tip to and paste your Tool-tip short-code

Step 3: Add Your Tooltip any place you want with Shortcode

Add your Tool-tip to and paste your Tool-tip short-code into WordPress website pages and posts widget or any description box.

Other Popular Articles...

How to Secure WordPress Site Guide & Tips

WordPress is most use framework on the web and most widely used open-source CMS in the world, you might hear a security vulnerability that is detected on WordPress and Secure Site and is being fixed. There are a lot of reports of WordPress websites being hacked and ... Read more →

Leave a Comment