What Are Tooltips Good For Anyway? 6 Simple Options for WordPress

What Are Tooltips Good For Anyway? 6 Simple Options for WordPress

When we recently talked about tips for decluttering your website, we were mostly just focused on hiding away secondary pieces of content that were still worthy of inclusion on the site, but that didn’t quite deserve a spot front and center.

Because your visitors’ experience always needs to be top-of-mind when developing a website, it’s really important for you to know how to strategically tuck certain pieces of information out of sight until the right moment.

That’s why we’re going to talk about tooltips today.

Why Your WordPress Website May Need Tooltips

Websites will vary from client to client, but there is one thing that always remains the same: you can accomplish a whole lot more with less. That’s why we often talk about decluttering, minimalism, and lightweight themes.

One of the less common tools we’ve seen people use to achieve this is the tooltip.

When you hover over tabs in Chrome, tooltips appear letting you know what the page is about.
When you hover over tabs in Chrome, tooltips appear letting you know what the page is about.

What is a Tooltip?

About 20 years ago, Microsoft introduced us to the original “tool tip”. Whenever a user hovered their cursor over an item in the application’s toolbar, a small message popped out to provide a hint or description on what that particular tool did. Microsoft’s programs have evolved quite a bit since then, so they’ve now got tooltip functionality built into all interactive or clickable parts of the interface (like in the example above).

Word processing programs aren’t the only ones who use tooltips anymore. They’re now also used within websites, too.

Let’s take a look at some examples.

The Classic Tooltip

If you’re not already using tooltips, you’ve at least seen them in action before.

An example of a classic tooltip.
An example of a classic tooltip.

Let’s use the example above from LinkedIn. As I was scrolling through my news feed today, I saw this sponsored post from Optimizely show up. When I hovered over the “Sponsored” text, I received that tooltip message. Then when I moved my cursor away it disappeared.

This is how a classic tooltip works, though there are other trigger effects possible. The hover is probably the least disruptive way to include a tooltip on your site, but you can also require that users do a little more work before seeing tooltips by adding in click, drag, or automatic pop-open functionality.

The Popover Tooltip

Technically, the example from Facebook above is a popover tooltip. The functionality is similar to a standard tooltip wherein you hover your mouse over hyperlinked text, a clickable box, or an image, and then a temporary message pops up while you hover.

An example of a pop-over tooltip.
An example of a pop-over tooltip.

The difference between a tooltip and a popover though is in the amount of detail included within the “tip.” Tooltips are exactly what the name says they are: they provide tips on how to use a given element (and they’re usually very brief). Popovers, however, tend to be used for providing an expanded description. These can be longer, include images, links, and more… though shorter is always better.

The Tour Tooltip

The last type of tooltip is a tour.

An example of a tour tooltip.
An example of a tour tooltip.

If you’ve ever signed up for a social media account or have used a new third-party software, chances are good you’ve taken or at least been offered one of these step-by-step tours. Some of these automatically begin when you enter a website and some are like the example above where you have to initiate the tour. They almost always give you the option to opt-out if you don’t feel like clicking through all the steps.

Either way, 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 workflow or interact with different parts of the site. The example above is from TourMyApp, which is a service that allows you to create click-through tours for web apps.

So now that you know what tooltips are, the question remains: will your website even need them?

What Can You Do With Tooltips?

Here’s the thing: your website will probably do just fine without tooltips. It’s not like a lack of tooltips will cause your visitors to flounder about hopelessly, trying to figure out where to turn to next. At least that’s our hope! Nevertheless, tooltips can still make for a really nice addition to websites for a number of reasons:

  1. Make your site more reader-friendly. As always, the less text you put on the main interface of your site, the better. If you can tuck away a tip that visitors may not want or need, you can keep your site free and clear of any potentially intrusive text.
  2. Guide your visitors to take action. If you’ve ever felt the need to have more control over getting visitors to take action, tooltips can give you an extra layer of guidance without having to add another call-to-action into your site’s design.
  3. Cut down on unnecessary back-and-forth. While your site’s design should already be intuitive, there may be some spots that trip up visitors. Rather than leave them feeling frustrated, confused, or needing to reach out to you for clarification, tooltips can be a built-in guide to your website.
  4. Provide extra info for visitors who want it. Let’s say you have a blog site that only showcases an image and the title of the article on the front page. Rather than force visitors to click through to start reading, you can use popover tooltips to provide extra descriptive info so they can decide whether or not they really want to take that action.
  5. Improve accessibility. Accessibility should always play a part in the planning and implementation phases during website development. Consequently, tooltips can be really useful in providing disabled visitors with extra direction.

Because of the very nature of tooltips, you’ll need to be careful in how you use them on your website. If you’ve decided that you can put these to good use, think about the following points before you get started:

  • Tooltips should be turned off for mobile devices. Mobile visitors already work with a compromised view of your website, so you don’t want to detract from that by including additional pop-up messaging.
  • Use them sparingly. If your website is littered with tooltips, visitors will be frustrated by the constant disruption. While some “friction” in the UX is okay—especially if you’re actively trying to get attention—in this case, it needs to be kept to a minimum.
  • Tooltips need to add value to whatever element triggered the pop-up. For instance, if you want to include tooltips in a form, you wouldn’t want the tooltip to repeat the name of the field. You’d want it to instead indicate an additional piece of helpful information, like providing the phone number format needed (i.e. (XXX) XXX-XXXX).
  • Keep the tooltip messaging as brief as possible. Classic tooltips and tours should only be a few words. Popovers can be a little longer, but it’s still better to keep them shorter.
  • Try to keep images out of your tooltips. If you find that you need to explain more or share photos, videos, etc., include a link in the tooltip to a page that includes all of the pertinent information.

As always, whenever you add a new element to your website’s design, A/B test the element to make sure it actually effective in maintaining visitors’ interest. While you may think tooltips are a great addition to your site, your visitors might not find them useful or necessary. A/B testing can help you make that determination.

COMMUNITY

Amazing people, tons of knowledge

With your WPMU DEV Membership comes access to our exclusive members-only forums, where you can discuss everything from SEO to online business strategy. Enjoy the free time our plugins give you, to grow your business!.

TRY WPMU DEV FREE

3 Ways to Create Tooltips

Before adding tooltips to your site, consider what type of styling will work best not only for your tooltips but also for when they are placed within the context of your website. There are different tools to help you achieve the effect you desire, so you’ll want to know what you need first.

Consider:

  • Font color
  • Background bubble/block color
  • Size
  • Opaqueness
  • Positioning
  • Trigger action (hover, click, etc.)
  • Trigger close (move cursor, click “X”, etc.)
  • Mobile blocking

Once you have a clear idea of what you want to accomplish, there are three ways by which you can create tooltips:

Tooltip WordPress Plugins

Here are some fantastic options for adding tooltip functionality to your WordPress site.

  • Simple Tooltips

    For basic tooltip additions, you can use this plugin to add a super convenient button to your WordPress post or page toolbar. You’ll then be able to create your own text, update text color, update backdrop color, and select which element will trigger the tooltip. This plugin is free.

    Interested in Simple Tooltips?

  • Magic Tooltips

    In order to use this plugin, you’ll need to have Gravity Forms installed in WordPress. Once that’s set up and ready to go, you’ll be able to purchase this plugin. If you have a lot of forms on your website or if the few you have are more elaborate, tooltips can come in handy in improving the user’s experience, and this plugin will give you full control over how those tooltips work.

    Interested in Magic Tooltips?

  • CM Tooltip Glossary

    If you run a site that uses a lot of technical terms, creating a glossary just makes good sense. and while you can display a glossary on a separate page, in footnotes, or linking key terms to definition pages, another way to help your visitors along is by displaying glossary tooltips.

    The CM ToolTip Glossary plugin lets you create a glossary then display definitions in tooltips whenever a user hovers over a term contained in it. The glossary index that’s created is also responsive and easy to browse. This plugin is free but a pro version is available.

    Interested in CM Tooltip Glossary?

CSS for Tooltips

While plugins provide a quicker solution to adding tooltips to a website, they’re not always the most comprehensive option. If you’re looking to get more control over how your tooltips look and want to explore more possibilities, give CSS a shot.

  • Simptip

    We’re really digging this simple CSS tooltip solution from Arash Manteghi. You can actually test out many of the variations right within the welcome screen message, which is pretty cool. While this isn’t the most comprehensive tooltip solution, it does offer more flexibility and control than the WordPress plugin solutions.

  • W3 Lesson

    I happen to be a really big fan of W3’s lessons. They’re simple, easy to follow, and they always provide you with everything you need. This lesson will show you the CSS you’ll need to create tooltips on your site. Make sure to read all the way to the bottom as they include further lessons for creating more complicated tooltips.

jQuery for Tooltips

If you’re comfortable working with CSS and Javascript, consider going the jQuery route for a simple way to create tooltips with a lot more options.

  • Tooltipster

    Tooltipster’s website is pretty cool. You can test out some of the tooltip options right there within the home page, which gives you just a taste of how complex you can get with these. And as you scroll down you’ll see they’ve broken out the process for creating tooltips in clear, easy to follow steps.

Wrapping Up

As you can see, tooltips make for a pretty interesting addition to WordPress websites. When used appropriately, you can improve the UX, increase accessibility, inspire visitors to take a certain action, and of course, keep your website’s design looking as clean as possible.

Just remember that any additional text added to your site may increase the amount of friction visitors have to deal with, so always aim to use tooltips sparingly.

Brenda Barron
Now over to you: If you’ve used tooltips on your website, tell us what ultimately inspired you to go that route.