Tooltips are awesome, there’s simply no denying it. They provide a simple, predictable and straightforward way to provide your users with useful, context-sensitive information, and they look cool to boot.
Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.
Logos, Print & Mockups
Icons, Vectors & More
Sans Serif, Script & More
Let’s skip the idea of saving the best for last. If you don’t want to sift through twenty-five different options and figure out which is best, just download Tipped. The tooltips are attractive, easy to implement and there are a ton of options to choose from. You’ll have a hard time topping this one.
Opentip is another top-notch tooltip plugin. Like Tipped, there are tons of options so you can do pretty much whatever you want with them. The design of the tips themselves shows a little more character than those for Tipped, which might or might not be a good thing for you project.
Simple but effective. This one gives you positioning options, allows image embeds and can be triggered by a number of different events.
This one isn’t the most attractive option, but it is pretty lightweight. The entire library is less than 10kb so you don’t have to worry about it slowing down your page. It admittedly seems a little ancient, but it still works.
Simpletip is exactly as advertised. It not only looks simple, it’s super easy to use as well. There are also some visual loading effects that you can take advantage of if you want to take things further.
Ditch the plugins that have been around since Netscape. Tooltipster is a modern, HTML5 valid, awesome tooltip plugin. It’s lightweight, fast, browser-friendly and easily styled with CSS.
jQuery users don’t have to go far to find great, robust tooltips, they’re built right into jQuery UI. They’re really simple and odds are you’ll find a ton of other stuff in the library that will make your site better as well.
I love everything Drew Wilson does. He’s the guy behind Screeny, Space Box, Pictos and a bunch of other cool stuff. The fact that he made this plugin is enough to make me download it. At less than 3.5kb, this thing is super light and super amazing.
Tipsy gives you very minimal and stylish tooltips without a bunch of fluff. It has all of the features that you need, like positioning and fade, and nothing superfluous that you’re never going to use.
This is a tooltip for the next generation of web design. It easily adapts to any size viewport and intelligently displays the tooltip in a size and position that is optimized for the current screen. If you’re doing responsive design, and you should be, you should look into responsive tooltips.
aToolTip allows you to have a tooltip that constantly moves with your cursor or stays put over its partner item. It has hover or click options, is under 4kb and has callback functions.
Downloading a prebuilt tooltip plugin is cool, but why not take the plunge and learn to build one? Colortip is a free download, but it’s a part of an in-depth, step-by-step tutorial for building the plugin from scratch.
ChillTip is a remarkable flexible tooltip plugin that allows you to implement the tips in a number of different ways. It can be used with span, img, anchor attributes and “pretty much anything else that uses the title attribute.”
This is not quite a tooltip, but it’s closely related so I thought I’d include it anyway. Instead of having a little pop up on hover, this gives you a little clickable dropdown where you can hide extra information.
To start off the CSS tooltip section, we turn to master developer David Walsh. This tutorial focuses more on how to create the classic tooltip shape with CSS and less on how to successfully implement and pure CSS tooltip.
This is a really awesome tool that allows you to easily build pure CSS tooltips simply by filling in a few fields. You can completely customize the appearance and contents using the simple form, then grab the code and paste it into your project.
A nice tutorial over on Six Revisions for creating really robust and attractive tooltips using CSS. The style is a sort of warning dialog look with an icon and colored box.
A simple, lightweight, cross-browser, pure CSS tooltip. It’s a free download and only takes up a single measly kb.
A simple, bubbly CSS tooltip. Not much here, but it works just fine!
This one is called “Easy CSS Tooltip” for a reason. It takes four lines of code: one line of HTML and three lines of CSS. That’s it! It doesn’t get much easier folks.
In this article, Konigi experiments with two different methods for delivering pure CSS tooltips. The first uses title and the second uses a span.
Here Adam Whitcroft teaches you to build tooltips with data attributes. That might sound a little scary, but they’re actually really easy to use. Be sure to give this one a read.
Here the author lays out a set of solid goals such as IE8 compatibility and minimal HTML, then shows you how he built some pure CSS tooltips that meet these goals. If you want a CSS tooltip that can be used in a professional, cross-browser environment, this is a good read.
What Do You Use for ToolTips?
Now that you’ve seen these twenty-five tooltip resources, it’s time to get out there and start making tooltips! Leave a comment below and tell us which resource you like the best or if you found any that weren’t listed above.