Five Non-Traditional Ways to Use Tooltips
In standard HTML, tooltips seem to be reserved for anchor tags - i.e. links. They get the all-powerful “title” attribute which is turned into a tooltip.
There are plenty of other times that you’d want to use a tooltip, though. If you’re wondering how, check out this previous post on how to create a custom tooltip with css.
Otherwise, read on for some thoughts on when to use these tooltips.
5. Definitions of Words
One interesting way to use custom tooltips is to show the definition of a word. This would be great for educational sites that aim to teach their users about a given subject. Rather than link to a new page with information on a word, just include a brief explanation in a tooltip.
Likewise, this could be used on coding tutorial sites to pop-up information on built-in functions and such. Hmm… do I smell a useful Wordpress plug-in?
4. Movie/Book/Television Spoilers
Do you write about movies, books, or tv shows? Well, I don’t. But if you did… you might want to share spoilers and other information with your users.
The problem is that not all users want to have the ending spoiled for them. I saw a similar thing used in a forum - all spoilers had to be wrapped in a bb-code tag that made them invisible until you moused-over them.
This way users can choose whether or not to learn the ending of the story. If you leave it out on the screen, they might read it by accident and blame you for ruining the whole thing.
3. Citations and Source Quotes
Do you find yourself quoting other sources often? Maybe your blog is a bit on the literary or academic side?
You could use these tooltips to contain footnoting and citation information. Rather than clicking a link to go to the bottom of the screen (i.e. Wikipedia style), have the information pop-up on a tooltip.
I know that when I’m reading a book I’m far more likely to pay attention to footnotes that are on the same page than footnotes at the end of the chapter or book. Convenience is key.
2. Puzzle or Logic Game Tips
Do you have some kind of puzzle, quiz, or game on your website? People love a challenge… but they hate a game that’s too hard.
The solution, of course, is to offer the user hints. These can’t be readily visible, though, or it’ll spoil the game.
With the tooltip, the user can easily mouse-over some text that says “First Tip,” to get a little hint without opening up a new window. Convenient indeed.
1. Instructions and Information for Forms
I’m not a big fan of extra text hanging out on a form telling a user what to do. It seems to get in the way and detract from the look of the form.
Instead, use a tooltip over the label (or add a “?” for the tooltip) to tell the user what to enter in a field. That way you can include lots of information - so much that you might find it to be over-simplifying - and the user won’t have to read this “help” unless they actually need it.
You help the confused users without turning off the savvy ones.
What Else?
I’m sure there are dozens of other ways to use custom tooltips. Got some ideas?
Then leave a comment. I’d love to hear how you’d use them.
Leave a Reply