Have you ever been on a medical website and come across a term that you weren’t sure of? I was checking a prescription medication for side effects and came across the word “febrile”. Que? I said to myself. I thought I knew what febrile meant (something along the lines of feeble), but as it turns out the word means “feverish”. I had to navigate away from the website and do a quick Google search. Most normal people use the term fever so it would have been nice if they had a definition of the word right there.
This kind of thing happens all the time. Think back on the last time this happened to you. I’ll bet it was within the last week. Wouldn’t it be nice to have a quick, simple way of including this kind of information on your website? There is – and it’s called tooltips.
What are tooltips?
Tooltips are a wonderful way of providing extra clarification around a term, word, or clickable button without having to type it all out. Many software manufacturers use them on their toolbars so that they can use a small graphic instead of the actual words. This leaves space to add more controls and buttons on the toolbar but can be confusing to the user.
By adding little explanations that popup as you hover over the control, the software company can maximize the number of buttons available and still provide clear explanations of what the control does.
How Tooltips can make your WordPress website easier for your visitors
If your business industry uses jargon, abbreviations, or technical terms tooltips can provide quick definitions without forcing the visitor to do an internet search. This has two big benefits:
- An internet search will usually mean that the visitor LEAVES your website. They may end up getting distracted by all the pretty/shiny on the internet and <squirrel!> what was I talking about? Oh, yea, they’ll forget where they started and end up buying from someone else.
- Learn a piece of jargon which makes them feel like an insider. Face it, didn’t you feel a little special the first time you explained what a blog was to someone? Side benefit – people who already know it won’t have to wade through a paragraph of definitions to get to the meat of your article.
- It adds more ‘zest’ to your website.* The website feels just a bit more interactive. “Hey what the heck is a mnemonic – oh, never mind, the author answers it right here. Isn’t that cool? I wonder how that’s done?”
* Bonus 3rd benefit. I’m all about going above and beyond for you!
With WordPress, adding tooltips is as simple as installing a plugin. The plugin I’m using here is WordPress Tooltip. The plugin adds a little graphical thought bubble icon to the post edit box. Adding a tooltip is as simple as selecting the text you want, clicking the icon, typing in the information you want in the popup, and clicking add.
The standard formatting is to add a dotted gray line below the item. It’s very subtle. A little too subtle for me, so I added some quick [tooltip content=”Changing the formatting is done in the custom.css file.” url=”” ]formatting[/tooltip] to make it stand out a bit.
Adding the body.custom required for Headway, add this to your custom.css file:
body.custom .wp-tooltip {
border: 2px solid #c5f1a6;
padding: 0 2px;}
This adds a green border, 2 pixels wide around the text. I’ve added some padding to the right and left so that there’s a little breathing room. You don’t need padding top and bottom.
Very quick to install, very quick to customize, and very easy to use.
How would you use tooltips on your website or blog? Take a look at your site from a beginner’s point of view. How could you make your website easier for your customers to use? I’d love to hear some practical examples – so leave a comment in the space below.
