Interactive Tooltip – The Key To Change The Way Users Interact

Interactive Walkthroughs

What is the easiest, nonsensical skill endorsement that you can get on Linkedin? Hands down! It’s MS Office. Or being a bit more specific MS Word.

Years back when LinkedIn popped-up a tooltip suggesting that, “Do you want to add MS Office and MS Word as your skills” I was like, “Okay cool, why not!” I did as suggested by the tooltip and went on to update my profile.

Years later, MS Office is still that skill with the highest endorsements on my LinkedIn profile. Albeit, I am sure that none of the endorsers of mine, ever saw me perform the extreme, dauntless tasks that I do on a daily basis on MS Word, Powerpoint or Excel.

Possibly, they were shown yet another tooltip that asked “Does Gokul know about Microsoft Office” and a call-to-action button that said, “Endorse”. Quite naturally they assumed, yes.

Why? Because it’s quite obvious, everyone knows MS Office!

However, the crux of this article is not whether you should add MS Office as a skill set or not. It’s a no brainer, just don’t!

The crux is that tooltip that prompted me to do this!

It was something that was not intrusive, yet compelling. It made me perform a task without thinking twice and years later, here I am, analyzing why I did that then.

That being said, in this article, I’ll show you everything that you need to know about this simple compelling tip that could possibly change the way users interact with your websites and web apps.

To give it complete justice, let me stray a bit away from my usual style.

I’ll first explain the implications and potential of the tooltip. And then go on to explain everything you need to know about the tooltip in depth.

How Can Tooltips Change User Interaction

What if I tell you that, “The evolution of Tooltips since the last 20 years has reached a point where you can control and dictate your user’s actions with them.

Is the idea intriguing? Does it trigger a FOMO that you never had?

Well if it does, then I urge you take a step back and think it through. Isn’t making the users act the way you want them to, the most important thing for any web application or website?

In an ideal world, that would mean no need for the user manual or knowledge bases or even help & support systems! It’s a definite possibility in the near future, but for now, let’s get realistic.

The solution that can help you achieve all of this is nothing but the Tooltip.

Let me explain.

Tooltips originally were created to provide contextual information about the various tools in an application without having to consult lengthy manuals and other documentation. That was about two decades back. Now, tooltips have evolved into a state in which they are no longer static, but are dynamic, smart and interactive.

They are capable of contextually guiding users through any complex web application, helping them proactively when they need help rather than the traditionally reactive method.

As for an example, check out this GIF of interactive tooltips I made on LinkedIn. (You might find it ironically funny.)

LinkedIn Endorsement - Interactive Tooltip

This is an interactive tooltip or rather an interactive walkthrough created using Whatfix. A performance support system that allows businesses help their new users at the time of need, with proactive tooltips.

Whatfix is a company which created their entire product with the tooltip at its core. The idea is to help users one step at a time with the pop-ups that prompt to take actions. Much like this GIF below which is Whatfix on Salesforce CRM.

Whatfix on Salesforce - Interactive Tooltip

The implications of this technology on today’s Enterprise software and web applications are already many. The use cases are also on par.

So, to justify my statement. Let me give you a gist of:
– Some of the applications of tooltips
– How it can change the way your customer interacts with your platform
– How you can control their actions

Let’s dive in.

How To Control Your Users Action With Tooltips

1. Help Users Navigate With Instant Contextual Support

This is something that you’ve already been using. When you are in doubt, and there is a “?” symbol in and around what you are working. There’s a likely chance you will point your mouse cursor towards it. On hover over, it pops up a description that helps you understand what that element is on the platform.

This is an example of a Classic tooltip. It generally looks like this:

Classic Tooltip


The above image just shows how it appears on hover over. Now, what if, the same tooltip can contain a link or an image or a video. Wouldn’t it be more useful to the user?

You improve the contextuality of the tooltip with a pinch of media element and its applicability improves at least tenfold. The user need not go google for more info or hunt for it in a knowledge base. Just hover over and possibly click on the image/video. And voila, the user gets what he wants instantly. And in turn, you get to make your users do what you think is best for them!

Bonus Tip: If you are a Whatfix user, then you’d love to know that our tooltips can include both images and videos. Check out this link for more info.

2. Train Users By Handholding Them Through A Series of Tasks

This maybe one of the newer applications of the tooltip. What if your tooltips are dynamic and can guide your users step by step? Much like the GIFs, you saw above.

Well, the potential of this solution can revolutionize the way employees are trained on software platforms. Once created, the set of sequential tooltips, (also called interactive walkthroughs or guided walkthroughs) take the users step by step from start to end of a task. So, that cuts down the manual effort to train a user through time-consuming descriptive documentations, videos, and specialized workshops.

These type of tooltips are known as the Interactive tooltip.

If you are in sync with me, then you already know that the interactive tooltip can capture your user’s attention and make him/her act the way you want them too. And when implemented as a sequential set, the interactive tooltips  (or rather interactive walkthroughs) would help him/her perform a particular task seamlessly, without any disruptions.

But then, how can you ensure that your users perform the tasks promptly?

Much like how a Knowledgebase lists down FAQ’s, make a list of all the interactive walkthroughs there is. You could probably have a list of them on a page with a search bar, which directs them to real-time interactive walkthroughs or else list them down in a quick access widget that eases that effort.

A widget like the Self-help widget below would be one of the quickest ways to leverage this.

Oracle self- help widget - tooltip

3. Get Users Onboard Through The Right Touch Points

Are you familiar with this tooltip?

Facebook tooltip

Being one of the most popular versions of the tooltip, Facebook was one of the big guns that hit the sweet spot initially. Twitter, LinkedIn, and many others followed the suit. Their common idea is to make sure that there are no features left unexplored.

LinkedIn tooltip

These tooltips are popularly known as Onboarding tooltips or rather Product tours. They guide users through the basic steps to setup an account or understand the platform or a feature. Useful for a newbie, onboarding tooltips are widely adopted nowadays in the software industry.

Tooltips like the ones of Facebook are near perfection. But still, not all businesses have the tech resources like that of Facebook. So, for that, you have options like the Open Source Tooltip creators or plug and play tooltip creator like Whatfix. (Yes, the one which I mentioned earlier.)

You could create an Onboarding tooltip that appears to a user as soon as he logs into the platform. The call-to-action on the tooltip can continue onto an interactive walkthrough that runs him through all the major touch points on the platform.

Here’s an example of an Onboarding tooltip.

Onboarding tooltip

4. Guide Vision Impaired Users With Extra Direction

Although not applicable to all applications, compliances like 508 is a mandatory addition to Enterprise software. The compliance ensures that the product can be used by the visually impaired users without much difficulty.

Interactive tooltip with 508 compliance enables screen readers to provide text-to-speech and Braille output which guides users on the platform.

Bonus tip: Whatfix is a 508 compliant performance support solution. You can find more information on the compliance here.

5. Real-time Help To Fill Online Forms

Online forms have forever been the web pages that use tooltips extensively. From sign-up forms to extensive registration forms, all of them consist of tooltips with simple descriptions that help users understand what needs to be filled.

But what if an interactive tooltip is used to replace these “?” and “More info” links?

Interactive tooltips like Whatfix’s Smart tips are dynamic tips that appear on form pages that help users in real-time based on the element box they interact.

This will give you a better idea.

Whatfix Smart Tooltips

Smart tips can be used in regular websites like Passport/Visa applications to business specific websites for an event or product registration. These real-time tooltips help the user understand what each box elements are in a nifty way that is not intrusive. It is a use case that organizations who rely on forms for their daily activities can highly rely on.

So, Are You Tapping the Tooltip’s potential?

The potential of these tooltips is still plenty. There are already popular adopters, like Salesforce which has its own walkthroughs, Oracle which has guided learning and ServiceNow which has interactive guidance. But truth be told, they are technology leaders. They tap on the potential as they see it. But for others, this could be a tricky situation.

Mark Zuckerberg once said, “The biggest risk is not taking any risk.”  So, if you are late to the party of interactive tooltips, you are not just losing out on a great solution but simultaneously you are also paying for expensive alternatives.

Now, as promised let’s get to understanding basics of the interactive tooltips. As in its original form and how you can make it for your web apps.

What Is A Tooltip? Why Were They Created?

Tooltips were originally a graphic element that displays information about an item on mouse hover.

About 2 decades ago, when we were highly dependent on the MS Office Suite, the original tooltip was introduced. (Microsoft refers to their tooltips as “ScreenTips.”) They were much like extended info pop-ups that explained what a tool was, on hovering over any of its icons in the toolbar.

Microsoft's tooltip - Screen Tip

The info pop-up generally consisted of a brief description that explained what it did, at times as a hint (with a light bulb icon) or sometimes as messages that suggested an action. It helped the users understand what each of the tools did and in turn in reducing the effort to read the help section to understand the tool better. Quick gratification being the main agenda!

It’s also popularly recognized by the “?” symbol and the “More info” that is synonymous to help text. (As mentioned earlier)

Then later, it became a standard whenever icons were used in applications. Possibly you must have seen similar tooltips on desktop applications (like MS Office, Adobe Suite, Desktop wizards, etc.), cloud applications (like CRMs, ERPs, HCMs, etc.), and as alternative text on images, etc.

Now, with the advent of the new generation interactive tooltip, these info pop-ups have made its distinct mark on the software industry.

How to create an interactive tooltip?

Analogous to Coach marks, Balloon tips, web walkthroughs, how-to guides, and guided tour, the Interactive tooltip is a solution that can be created in multiple ways.

If you simply google tooltip, then it will likely show you links on how you can create:

  • Bootstrap Tooltips
  • jQuery Tooltips
  • JavaScript Tooltips
  • CSS Tooltips
  • HTML Tooltips

But, there is a catch. All of these links point to the Classic Tooltip. And moreover, they are probably pretty old.

Now, if Interactive Tooltips is what you want, then you could try these Open Source frameworks:

These are more likely to be new. And they are simply the challenges that developers would love to take on.

The Simplest Alternative

By now you should have understood all that is there about tooltips. (Feel free to let me know your doubts/suggestions in the comment section)

And the realization of its potential and the tech behind it also must have crept into your mind.

But, if I tell you that you can deploy interactive tooltips in your web application within an hour, create interactive walkthroughs within minutes and all of it without knowing how to code.

As an Evangelizer of Whatfix, I did mention it a few times above in the article. And well, Whatfix is a specialized solution that has been adopted by hundreds of businesses, including enterprises like HP, AAA, (The Priceline Group), NASA, CNA Financial, Heineken, PEW Charitable Trusts and Wyndham Worldwide.

So, if you are looking for the simplest alternative to get this solution for your platform, then take my word for it and try out Whatfix!

Gokul Suresh

Gokul Suresh

Gokul is the 1st Marketer of Whatfix and has written over 100 articles for Whatfix Academy since its inception.

There was a time when he used to be the all-in-all for Whatfix's Content Strategy, but now he has moved to a newer challenge expanding Whatfix's footprint with Events, Field, and Growth Marketing!

Have anything to say to him? Tweet out to him. He enjoys constructive criticism.
Gokul Suresh
No Comments

Post A Comment

Discover How Whatfix Can Help Your Business


Discover How Whatfix Can Help Your Business


Discover How Whatfix Can Help Your Business