{"id":158999,"date":"2016-09-12T13:00:43","date_gmt":"2016-09-12T13:00:43","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=158999"},"modified":"2016-09-12T02:37:57","modified_gmt":"2016-09-12T02:37:57","slug":"tooltips-wordpress","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/tooltips-wordpress\/","title":{"rendered":"What Are Tooltips Good For Anyway? 6 Simple Options for WordPress"},"content":{"rendered":"

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

Because your visitors\u2019 experience always needs to be top-of-mind when developing a website, it\u2019s really important for you to know how to strategically tuck certain pieces of information out of sight until the right moment.<\/p>\n

That\u2019s why we\u2019re going to talk about tooltips today.<\/p>\n

Why Your WordPress Website May Need Tooltips<\/h2>\n

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\u2019s why we often talk about decluttering, minimalism, and lightweight themes<\/a>.<\/p>\n

One of the less common tools we\u2019ve seen people use to achieve this is the tooltip.<\/p>\n

\n
\"When
When you hover over tabs in Chrome, tooltips appear letting you know what the page is about.<\/figcaption><\/figure>\n<\/div>\n

What is a Tooltip?<\/h3>\n

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

Word processing programs aren\u2019t the only ones who use tooltips anymore. They\u2019re now also used within websites, too.<\/p>\n

Let’s take a look at some examples.<\/p>\n

The Classic Tooltip<\/h3>\n

If you\u2019re not already using tooltips, you\u2019ve at least seen them in action before.<\/p>\n

\n
\"An
An example of a classic tooltip.<\/figcaption><\/figure>\n<\/div>\n

Let\u2019s 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 \u201cSponsored\u201d text, I received that tooltip message. Then when I moved my cursor away it disappeared.<\/p>\n

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.<\/p>\n

The Popover Tooltip<\/h3>\n

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.<\/p>\n

\n
\"An
An example of a pop-over tooltip.<\/figcaption><\/figure>\n<\/div>\n

The difference between a tooltip and a popover though is in the amount of detail included within the \u201ctip.\u201d Tooltips are exactly what the name says they are: they provide tips on how to use a given element (and they\u2019re usually very brief). Popovers, however, tend to be used for providing an expanded description. These can be longer, include images, links, and more\u2026 though shorter is always better.<\/p>\n

The Tour Tooltip<\/h3>\n

The last type of tooltip is a tour.<\/p>\n

\n
\"An
An example of a tour tooltip.<\/figcaption><\/figure>\n<\/div>\n

If you\u2019ve ever signed up for a social media account or have used a new third-party software, chances are good you\u2019ve 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\u2019t feel like clicking through all the steps.<\/p>\n

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<\/a>, which is a service that allows you to create click-through tours for web apps.<\/p>\n

So now that you know what tooltips are, the question remains: will your website even need them?<\/p>\n

What Can You Do With Tooltips?<\/h3>\n

Here\u2019s the thing: your website will probably do just fine without tooltips. It\u2019s 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\u2019s our hope! Nevertheless, tooltips can still make for a really nice addition to websites for a number of reasons:<\/p>\n

    \n
  1. Make your site more reader-friendly.<\/b> 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.<\/li>\n
  2. Guide your visitors to take action.<\/b> If you\u2019ve 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\u2019s design.<\/li>\n
  3. Cut down on unnecessary back-and-forth.<\/b> While your site\u2019s 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.<\/li>\n
  4. Provide extra info for visitors who want it.<\/b> Let\u2019s 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.<\/li>\n
  5. Improve accessibility.<\/b> Accessibility<\/a> 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.<\/li>\n<\/ol>\n

    Because of the very nature of tooltips, you\u2019ll need to be careful in how you use them on your website. If you\u2019ve decided that you can put these to good use, think about the following points before you get started:<\/p>\n