fbpx

How to Create Tooltips in WordPress Website using Master Addons?

tooltip for WordPress

Tooltips on WordPress content makes it easier for the reader to understand the intent of the message you want to send out.

What are tooltips, and how do they work?

  • Have you ever gone to a library?
  • Do you look at the cover and wonder what the story is about?
  • What if I told you – “you had to buy the book to know the story”?
  • That Would Suck, right?

Tooltip for WordPress VS library Story

You can’t read the book only to find halfway; it doesn’t interest you. What we ideally do is pick up the book and read the synopsis first. If it is something that interests us, we go ahead and buy it. Tooltips do something similar to a synopsis.

If you have ever used the most basic functions of a computer, you have seen a tooltip. 

If you open a word document on Microsoft or paint or any other application and hover your cursor over the toolbox on the top, for each of the tools you will find a small message pop up about what it does. Just imagine how difficult it would have been if you had to click on each of the tools to know what function they do. 

If you’re wondering how do tooltips help your WordPress content and why you need it when you can simply put a subtitle against any image.

Then let me tell you that the reasons are many.

First of all, subtitles take space. If you start writing subtitles against each of the images, it will fill up your content page. It looks congested, it’s like when you look at your history book right before the exam. The sight of it makes you want to close the book.

Tooltips don’t need any space and they only pop up when the reader wants to know about the image.

Secondly, they are interactive. For example, when you are making friends, you don’t proactively tell them about your hobbies, your family history, your education, and stuff. It is only when they ask you is when you tell. That’s how interaction works. You want to make your content interactive as well. 

Interactive content is more likely to keep your readers engaged than a bland page with information overload.

And thirdly, the Tooltip appears with an animation in the WordPress content. It makes the reading experience interesting for the readers versus blandly reading through the lines like its a textbook. 

You can put Tooltips over images, icons, and text. If you are wondering why you need tooltip on a text then here’s why- if you’re trying to explain a word on your content that doesn’t do much to the actual message of your content, then explaining the word shouldn’t distract your reader. However, if your reader wants to know what it means, he or she just have to hover the cursor over the word, and they will know what the word means. Not only that it gives you the option of going into the explanation about the words with examples. If there is anything interesting, you want to tell them about that particular word you can do it in the tooltip. It keeps your content from becoming too overwhelming for people. A large bulk of information all together can become too much to take at times.

How do you create Tooltip?

Considering you already have the plugin Elementor in your WordPress content. The addon called “Master Addons” helps you to create useful tooltips for WordPress.

Make sure you have installed “Master Addons” WordPress Plugin in your Website. Tooltip is very easy to set up and gives your varied range of Designing options.

Edit a Page with “Elementor Page Builder” and lookup “MA Tooltip” addon from Master Addons Section.

MA Tooltip

You can select “Icon“, “Text“, “image” as the “Content-Type” and for the image, you have to upload an image from your WordPress Media Library. Go to Tooltip Setting. 

MA Tooltip Content Settings

Image and Icon Tooltip Demo

I have arranged a live demo look for you within the post. Just hover on each icon and the following image, you able to see how tooltip works. It has lots of customization possibilities too.

Linux Operating System
Windows Operating System
Apple Operating System
Android Operating System
These are some dummy tooltip contents
Firefox Browser
Internet Explorer
Safari Browser
Chrome Browser

A small window of WordPress editor will pop up where you can write the contents of your Tooltip Display. Once you have written what people will see in the tooltip you need to select the Hover direction, that is the side the tooltip will pop up from. 

You also need to select the tooltip speed to set the speed and fluidity with which it will come on screen. 

MA Tooltip gives you unlimited design option and is perfect Elementor element for creative tooltips.

MA Tooltip Style

Other settings for the tooltips include the screen space of the tooltip, content max-width, background colour, text colour box, Shadow, fonts, font-size, border size for both normal and hover states. 

Posted in Tutorials
Use BLACKFRIDAY50 Coupon Code for 50% Discount 
Pricing
close-image