How to add and use tooltips in your Wordpress posts and pages

6.8K followers

5 years ago

First of all, let's clarify the terms and let's see why should you use tooltips on your website ...

Basically, the tooltips are text labels that appear when the user hovers over, focuses on, or touches an element.

Originally, they were used to "identify" a given, activated web element ... However, nowadays they are much more dynamic, appearing when a user lands on a page or being automatically triggered after a specific interaction with another element.

In other words, they will act like smaller, simpler pop-up boxes. In fact, the only difference is that a pop-up box usually will contain much more content.

With that having said, let's see the obvious question: why your website may need tooltips?

Well, there are many reasons ... The most common one: you want to declutter your site in a simple manner that will allow you to strategically tuck certain pieces of information out of sight until the right moment.

Each site has different goals and that means different target audiences ... We are making great efforts to capture and to maintain their attention, but we tend to forget that sometimes we can accomplish a whole lot more with less! And one of the most efficient tools you can use to achieve minimalism is the good old tooltip ...

Let's see some examples ...

Here's a simple, classic Facebook tooltip message that becomes visible if I hover the mouse over the info icon on a linked post image:

And here's a Facebook popover tooltip displayed while I'm keeping my mouse over a hyperlinked text:

As I said, the difference between a simple tooltip and a popover is in the amount of detail included within the “tip.” Popovers tend to be used for providing an expanded description, and usually they will contain images, links, etc …

And here's a Dribble tour tooltip:

These automatic, step-by-step tour tips can be seen almost everywhere ... When you are creating a new account for a social media platform, when you are using a new third-party software, etc ... Usually, these are a more elaborate, multi-step version of the standard tooltip that is meant to provide helpful guidance and information on how to use a given workflow, and most likely they will give you the option to opt-out if you don’t feel like clicking through all the steps.

Now that you already know what tooltips are, let's see the really important question: what can you do with tooltips?

I won't lie ... If you have a clear, intuitive site architecture and a user-friendly menu system, your website will probably do just fine without tooltips ...

Still, tooltips can make for a really nice addition to websites for a number of reasons:

very often, you can accomplish a whole lot more with less effort
tooltips can be really useful in providing disabled visitors with extra direction
you can use tooltips to provide extra descriptive info for your readers, so they can decide whether or not they really want or need to take that action
tooltips can give you an extra layer of guidance without having to add another buttons, call-to-action elements, etc
tooltips can be efficiently used as built-in guides to avoid any frustration and confusion on bigger, complex websites
tooltips will help you to keep your site truly user-friendly

Pretty good reasons, right? ... This is why I've decided to create this short tutorial, where I will show you how easy is to add tooltips to your Wordpress posts and pages.

Interested?

Here it is:

How to add and use tooltips in your Wordpress posts and pages

Enjoy it!