One of the most important things when evaluating a website is realize if it offers enough hints and solutions to be found by the audience their navigation across the entire page, think of it as a sailor who needs to see the beacon’s light while approaching to the shore, there’s no way that the sailor will find the city’s Major waiting and guiding him to reach the dock, not even the sheriff will have time for that, but the beacon will always be there to enlighten the sailor’s way.
Icon by Iconshock
Background and features
Tooltips are among the most common graphical user interface elements, their functionality is strictly connected to the cursor behavior, showing up the tooltip after a roll over, roll out or click action. Since the era of Windows 95, tooltips were introduced to aid the user expand the information regarding the element that they were looking into but without having to display it all the time on the screen. A clear example of a tooltip is when you scroll over the eraser icon in Photoshop, a tooltip with the words “eraser tool” will show up, informing the user that this icon is affirmatively meant to be used for erasing elements within a Photoshop file.
Tooltips are extremely useful when the person is exploring for the first time a videogame, a website, an application or a program, because they make the user experience way much easier without disturbing him severely. Another use of tooltips is when you have large lists of elements and you don’t want to utilize larger images that will slow down your site and take over the whole interface, what you can do in that case is place a tooltip that people can click or roll over so they can find a larger preview of the object. In case you find the word “balloon” whilst studying tooltips, that’s just a way to describe tooltips that have precisely a balloon aspect reminiscent of the comic books dialogues. As for the term “infotip”, it’s referring to extended tooltips that expose more information than an average tooltip element.
Good tooltip practices
Tooltips can work in any place that requires additional information for the user to understand it entirely, but before we start studying the different tooltips that we can find over the internet, it’s very important to consider some simple rules that can differentiate a well done tooltip from a good one, let’s take a short view across this so-called rules:
- Along with tooltips, you will often find the words “balloon” and “infotips”. Balloons are similar to tooltips but just like a balloon, they have a tail pointing to the source, so people can easily understand what’s the balloon actually explaining.
- Infotips are extended tooltips that provide supplementary information that can be useful for the average user.
- Tooltips should appear only through user interaction, while balloons can actually appear by their own.
- If a button already has a label, it’s probably that the presence of a tooltip is not needed.
- Use infotips only when tooltips are definitely not enough to provide the information you want regarding an specific element, otherwise it will be pure filling.
- Try not to use tooltips for displaying a status, error message or warning, there are other elements to fulfill these tasks.
- If the user will probably need to print the tips, then you shouldn’t utilize tooltips, a better option will be static comment fields.
- Never try to replace a good design with tons of tooltips, that’s just an awful idea.
- Make your tooltips as obvious to find as possible for your visitors.
- Use time delay, it’s better that the tooltip shows up after about 0.5 seconds, continues to display 0.1 seconds after rolling over and completely banishes after no more than 4 seconds.
- Be concise, use short sentences to describe the element, there’s no room for large speeches.
- If you’re using a tooltip is because it provides additional information and not just repeats or changes the words but continues to say the same thing.
- You can’t depend on tooltips, buttons and labels must speak for themselves as many people won’t notice the tooltips or will choose to ignore them.
- If an element appears constantly from window to another, the tooltip must remain static so the user does not get any wrong signals.
- Place well the tooltip, the tooltip must show up in a place where it does not sabotage what the user is doing, either by covering essential information, blocking input fields or covering the tooltip’s source itself.
- Keep tooltips brief, the ideal tooltip is one that’s summed up in 5 words. less words might not describe properly the element and more than 5 will become more than a sentence.
- Another good practice when making tooltips is to add shortcuts and default values to it, always frame these between parentheses.
- Don’t use marketing language on your tooltips and infotips, it’s just not right.
- Using synonyms is a good way of making accurate descriptions.
- Use sentence-style capitalization for writing your tooltips.
- Don’t use ending punctuation.
- Focus on what users can do, it’s useless to just repeat the same information that is already written.
- Avoid generic verbs and catch-all phrases like “and other programs”.
Now that we have studied the best practices when we’re talking about making a tooltip, we can proceed by checking those sites where the presence of tooltips is quite useful for helping the user understand the navigation system and where to go next:
Many e-commerce places make a good use of tooltips to expand the information regarding their products and we can realize that by visiting sites like eBay, Amazon or Iconshock, where tooltips fulfill an important function on the sites.
- In places like Iconshock, where visuals are the essence of the whole page, tooltips can be used to enlarge the previews and help people find the fittest designs for what they’re looking for.
- This tooltip is providing information regarding a new promotion offered on the Iconshock site, it’s a good idea to use a tooltip for this, due to the fact that people is more focused on buying icon sets and stuff. The small yellow button is attractive enough to make people rollover and find out the information regarding the promo.
- Similar to the Iconshock’s tooltip, when you roll over an item while searching on eBay, you will see a tooltip appear featuring some images of the product in question.
- Scrolling over a product will show a little tooltip where you find the article’s name, prize and amount of bids, which is the basic information that every costumer will need to know.
- Another example of proper tooltip implementing is the one found on the Digg login area. When you try to submit a link to the site and you’re not logged in, a tooltip will appear asking you to login or create an account.
- This tooltip says the obvious, but the idea of the designer was to implement it as a cute element inside the page that could also add some dynamism to it.
- In Mashable’s comment section, you will see a small tooltip showing up when you rollover a person’s name, the tooltip offers you the chance of seeing an extended profile of the person that left the comment.
- When you access an article at Meneame, you can take a look at the best comments section and see how a tooltip expands showing the complete quoted text of that specific comment.
Bad practices and problems
It’s certain that tooltips can be quite useful when you use them properly, following all the good practice rules and learning when and when not to use them, but as every thing, there are many sites that just can use the tooltips well, either if it’s for overusing them, breaking the time rules or just making them look bad.
- On Enlace you will find what we can call “a tooltip that should have been but wasn’t”. What we can expect from this ask mark is a tooltip showing up clarifying the issue, but instead of that we need to click and get transferred to another page, a complete waste of time.
Dealing with touchscreen and mobile devices
On these days, touchscreen devices have become more popular than ever. From the now famous iPhone to the TouchSmart computers, everything seems to be taking a step aside from relying on a mouse device. It’s from that moment when many people realized that tooltips as we know them will have no way to survive on this media, because they depend of the MouseOver action to show up and as we all know, there’s no such thing on touch devices, only click, release and drag.
Some people say that is time for the designers to start developing better interfaces that won’t need tooltips to be clear enough for the visitors, but that’s only a half way solution, because the tooltips that are designed to expand information or work as a preview are simply necessary on any good web design.
Icon by Iconshock
We’re facing a major technologic problem that requires a solution because at the present time, the standard computers will keep the advantage and continue to use tooltips. There’s definitely something coming up that will bring tooltips back in the game, could it be more sensitive surfaces that can detect the MouseOver action when placing the finger or digital pen closer enough to the surface, or maybe this whole 3D revolution could provide the solution to this problem. Anyway, the paradigm of tooltips being rejected from the touch technology will remain until some genius comes out with the million dollars idea.
OK after this brief review about the tooltips subject, we like to introduce a great showcase featuring the nicest and most helpful tooltips to implement on your site, from the minimal to the Kitsch, everything was taken into account when arraying this showcase.
Our top selection
Before leaving you with the complete countdown, we like to show you our personal selection of tooltips, which were evaluated following different parameters, including design, functionality and language.
- Complete control over the tooltip’s position
- Configurable rounded corners without using PNG
- Sweet speech bubble effect.
- Just a few codes needed to create new styles.
- The tooltip works on every browser.
- Tons of different styles and properties to work with.
- Incorporated AJAX functionality
- Display the tooltip in several positions
- You can either trigger it by rolling over or clicking.
- Insert HTML inside the tooltip and display large text blocks and images.
- Excellent documentation that covers all the necessary aspects that people may look for.
- Prototype is not a very common language, so it would be better if it was designed for jQuery or a similar library.
- There’s no free-version for small developers, you’ll need to pay a fee in order to use it.
- The troubleshooting section could be more extended that what is currently.
- Note: Despite the fact that we included the payment as a contra, this could also be a pro because by purchasing Prototip you will earn access to full support and updates at no extra cost.
- Many great tooltip examples made with jQuery are located on this site, feel free to study them and decide which one fits best to your needs. From simple to rich, you can customize your tooltips to be as complex as you wish; through the CSS you can work with many parameters to fancy your tooltip.
- Take advantage of the [title] attribute to work with more complex tooltips.
- Switch between fading, sliding, dynamic or configure your own fancy effects.
- Use the CSS to configure timing, design and positioning parameters.
- Work with lot of values, including gradients, rounded corners, shadows and more
- Small package, only 1.10 Kb.
- Nice tooltip graphics to start working with immediately.
- Add a fancy transition effect by playing with the opacity property.
- You can place the tooltip in different positions, which makes a lot easier the implementation.
- Complete documentation, including the API scripting, event functions and more.
- A specific method is included to develop custom effects.
- Although there is a clear and organized documentation, there’s not a proper troubleshoot section where the developers can look for advice and solutions.
- Lovely tooltips is a great plugin for the jQuery library, recommended for all programmers and developers. On the documentation section you will find all the necessary tips to set your tooltip, including position fixing, playing with the hide property, adjust how the contents are loaded and more. You will also be able to see some cool demos and download the latest version.
- Simpletip can be either static, dynamic, or even loaded through Ajax with a variety of visual effects.
- Good documentation, explaining the different properties and values that can be adjusted within the tooltip.
- Well-explained instructions on how to install and implement Simpletip on your website.
- Compatible with jQuery 1.2.x upwards.
- The tooltip homepage itself has a nice appearance, comfortable for all the visitors.
- Every effect and property shows the respective code and demo.
- Great scripting API for users, fully functional.
- Several key callback functions to extend the library’s functionality with your own custom methods.
- The tooltip does not support Google Chrome.
- To much focusing on promoting qTip, which reduces the attention paid to Simpletip.
- The latest version of Simpletip is more than 1 year old.
- jQuery tooltip for use in field forms. Every time you roll over an ask mark, the tooltip will popup, showing a very elegant design with accurate readability, ideal to be implemented on corporative sites and / or minimalistic, we decided to put in our top selection due its design qualities and functionality.
- The design of the tooltip itself is very elegant, managing a black and white color palette.
- You can either implement it as a tooltip or infotip depending on your needs
- Easily implement images and HTML inside the tooltip.
- Place it on top of links without hiding them thanks to the facility of adjusting the position.
- AJAX support included.
- Poor documentation, there’s not enough information to read about.
- There’s no troubleshooting section or “how to” guide, which difficult the understanding process.
- The site is more focused on promoting the author but fails in assisting the tooltip’s users.
More brilliant tooltips
And from this point we like to list some additional tooltips that we found whilst developing our research, you will find different designs, programming languages and functions from one tooltip to another, grab some time to read the entire list and see which tooltip works the best for your needs.
Classic tooltip that uses a background to highlight in front of the site.
A revision to the original nice titles and a nice improvement in front of the classic one. The rounded corners detail is a good complement to the design.
Get inspired by Digg and learn how to make this particular tooltip.
FlashTuts+ have brought to us this extended tooltip tutorial where you will learn how to take advantage of Flash for making a nice tooltip.
HelpBalloon.js features a few balloon examples to implement as help fields on your website.
Improve your jQuery library with these useful tooltips ready to be utilized.
qTip applies to more than just the links in most browsers, including IE 5,5 +, Safari, Firefox and Opera.
Simple balloon tooltip that you can use on your own web applications.
Dynamic tooltips that appear when executing a MouseOver or click action over an element.
Nice CSS/JS based popup tooltips, you can either choose to donate or free use this script, the developer deserves some credit for sure.
An Ajax-based tooltip, each time that you scroll over an object, the tooltip will show up.
Many references to the Coda Popup Bubble can be found here, but with some key differences that you will need to discover by yourself.
Easy way to show tooltips without covering any vital information in the process, nice tooltip.
Clean code, fancy tooltips, great fading effect.
More than just a tooltip, this element has some basic menu capabilities.
Using only CSS, you can create pretty tooltips like the one showed on the previous screenshot.
Fancy balloon demonstration, includes several styles to experiment whilst designing.
This set was inspired on Eric Meyer’s Pure CSS PopUps
but adjusted to work as tooltips.
Pure CSS was utilized on the making of these great tooltips.
More CSS, you can see the code that was utilized during the developing of these tooltips.
Just another CSS tooltip design, the changes are noticeable in terms of color and structure.
This is when tooltips are not enough and infotips or balloons become necessary.
Despite the fact that we’re listing it as a single tooltip, you will find a lot of tooltip variations on this link, including image tooltips, formatted and more.
You will probably attracted to the tooltip with the background, because that’s not usual to see.
With DOM tooltip the developers can incorporate their own customized tooltips to their websites.
An extension for Overlay that is analogous to show up tooltips within common operating systems.
Two different types of tooltips are included on this WordPress plugin that can instantly be incorporated in your site.
ClueTip plug-in lets you easily configure a link to show a “tooltip” when the user’s rolls over the link.
Elegant jQuery tooltip, you can find the documentation about it along with the download.
As simple as it gets without losing its aesthetics, useful tooltip for minimalistic interfaces.
Quoting the site’s description, inline HTML Tooltip lets you define rich HTML tooltips that are embedded directly inside your webpage and that appear when the mouse rolls over links on your page. The tooltip appears directly beneath the anchor link, and adjusts its position dynamically based on whether the mouse is too close to the window’s edges.
HTML tooltip with a simple but effective design. You can look for additional information and options on the site.
Working with jQuery is one of the greatest things for programmers and developers, here you will see how to develop a fancy tooltip series using this great tool.
BeautyTips is a handily to manage balloon-help style tooltip plugin.
Another great advance on the internet has been definitely HTML5, with this new version you can design stunning tooltips such as this one.
Elegant and fancy tooltip that works with a mouse-hover function, ideal for classy sites and fashion related.
This is a clear demonstration of how you can improve your tooltips by adding just some design points.
Very cool popup bubble, see how a simple RSS icon gets a lot of life by just adding the tooltip to it.
So there’s a way to make tooltips a essential part of a horizontal menu, pretty cool.
Another jQuery plugin, you have probably figured out by this point that prettifying a tooltip is not as hard as you may think.
Useful tutorial with the necessary instructions for people to learn how to develop their own tooltips.
Fancy tooltip with jQuery and CSS3, the subtle rounded details and the shadow are a great complement for the entire design.
As the description says, Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag’s title attribute.
An specific purpose is behind VTip, and it’s to become one of the lightest and yet nicest tooltip around.
Work with your tooltip’s position in a whole 360 area, that way you won’t intercept valuable information at any time.
Many simple tooltips are usually the ones preferred by developers and designers because that simplicity gives more creative freedom and this is definitely an example.
Quoting the site’s description, BetterTip is a plugin for the JQuery library that allows you to create custom tool tips. It is based on Cody Lindley’s jTip
, but it is much more flexible.
With this jQuery plugin you can create great tooltips with Ajax content.
Easy peasy and with great results, definitely a nice way to work with tooltips.
Simple and elegant tooltip, you can access to the full code to use it for your own web designs.
Learn how to develop a good looking tooltip with jQuery and CSS thanks to this article.
This tooltip widget was designed to be implemented on Google Web Toolkit.
Dynamic tooltips that show up while scrolling across this fancy slider.
Simple tooltip that can be easily implemented on your site, you can check the entire code at the site.
Using AJAX to create it, this simple but effective tooltip has the capability to show external contents inside of it when displayed.
This is where a tooltip is well used, because it’s not only repeating the same information but providing some additional data to the person that’s seeing it.
According to the description, what sets this tooltip apart is where it gets the tooltip messages- from ordinary DIV elements on the page containing the desired tooltip content.
Move across the three different tooltip styles of this page and see which one fits you the better.
The tooltip activates when you roll over a hyperlink, showing up a fading textual script.
One of the easiest way to implement a tooltip without covering vital information during the process is by making them show up in one of the site’s corner, exactly like this tooltip does.
Descriptive tooltips that provide additional information regarding the highlighted item.
Tooltips can be useful in form fields, because they can provide assistance to people when they’re not sure of what are they suppose to type in a specific field.
You can use this tooltip to provide your visitors additional information about the different links of the page.
For all the World of Warcraft fans, here comes a Wowhead inspired tooltip set ready to be installed on your website.
A small list featuring some examples of what you can achieve with tooltips and a little creativity.
Learn how to create great tooltips using CSS, nothing else but CSS.
Useful tooltip series to install as an extension for all the Joomla lovers out there.
Simple, elegant and colorful jQuery tooltip plugin, read the documentation before installing it in one of your web designs.
This is a wrapper class for the comctl32 api, it allows you to create awesome tooltips.
Let’s not forget about ActionScript, it’s still an amazing tool that you can use for making great things like these tooltips.
Really nice tooltips, it’s important to not only pay attention to the programming but to the design as well.
A few advanced tricks can lead you to create nice tooltips like these.
Having tooltips to work as preview components is always a good idea to apply.
Easy and simple, this tooltip definitively works in minimalistic interfaces.
Beautiful tooltip that reacts with a roll over action and shows up performing a fancy animation.
Another tooltip application generated using Flash, as you can see the language competition is on.
ActionScript 3.0 owns a lot of potential, as you can witness on this great
Different tooltip styles are included into this renewed version of ClueTip.
Each field’s tooltip is displayed when rolling over a determined element.
You are able to see the text below the shadow, which is something that not every tooltip possesses.
Generate translucent tooltips with shadows, a good-looking solution for your web designs.
When you roll over a thumbnail, a preview will pop up in a tooltip way, like the one that’s utilized on Iconshock.
Nice way of utilizing a tooltip, it not only shows additional information but posses a search bar and buttons inside of it.
This is a powerful jQuery interface (GUI) for making stylish, feature-rich HTML tooltips for your web pages, keeping the effort to the minimum as well as the coding.
And the last one, this is a pretty cool tooltip developed utilizing only ActionScript 3, really nice design.
The power of CSS3 can be witnessed on this lovely tooltip, the rounded corners and drop shadow effect are just a sample of the improvement on the design.
Useful tooltip that among its features includes inserting HTML and images inside of it.
Well that’s it for this countdown, 100 of the nicest and most functional tooltips around. From those who appeal a very minimalistic look to the ones that actually fulfill and extended infotip function, providing vital information in reduced spaces. We hope that you find this post relevant to help you grow as a web developer and see many different ways of solving a particular issue, let us know about the M.I.A. tooltips that were not featured on the roundup so the whole community can learn about their existence, thanks for visiting Webdesignshock and remember to leave us a comment so we can realize how to keep improving the site for all of our visitors, we will truly appreciate it, see you soon.