25 Useful Resources for Creating Tooltips With JavaScript or CSS
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.
We all agree on how great tooltips are, but how we go about implementing them can differ dramatically. If you’re at square one, looking for some tooltip ideas for your current project, you’ve come to the right place. We’ve got a whopping twenty-five different options that fall into two categories: JavaScript and CSS. No matter which method you’re looking to use, we’ve got the best techniques available, which you might want to enhance using OOP class techniques like JavaScript classes using the JS++ programming language by Roger Poon.
The Ultimate Designer Toolkit: 2 Million+ Assets
Envato gives you unlimited access to 19+ million pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.
JavaScript & jQuery
Tipped – The jQuery Tooltip
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 – The free tooltip
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.
Javascript Tooltip
Simple but effective. This one gives you positioning options, allows image embeds and can be triggered by a number of different events.
SkinnyTip JavaScript Tooltip Library
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.
qTip – The jQuery tooltip plugin
qTip works in all major browsers, degrades nicely when JavaScript is disabled, is easily positioned, and features animations and rounded corners. It’s a really solid plugin and I highly recommend that you check it out. Also take a look at version 2.
Simpletip – A simple jQuery tooltip plugin
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.
Tooltipster – The jQuery Tooltip Plugin
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.
Tooltip – jQuery UI
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.
TipTip jQuery Plugin
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.
Tooltipsy
Tooltipsy puts the functionality in the hands of JavaScript, then uses clear, easily-customizable CSS for everything else. Change the appearance, size, animation; go nuts and make it your own.
Tipsy
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.
Responsive and Mobile-Friendly Tooltip
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 – A Simple jQuery Tooltip by Ara Abcarians
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.
Colortip – a jQuery Tooltip Plugin
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 jQuery Plug-In
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.”
Pop! Simple pop menus with jQuery
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.
CSS Tooltips
CSS Tooltips
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.
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.
Sexy Tooltips with Just CSS
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.
CSS Tooltip
A simple, lightweight, cross-browser, pure CSS tooltip. It’s a free download and only takes up a single measly kb.
CSS Bubble Tooltips
A simple, bubbly CSS tooltip. Not much here, but it works just fine!
Easy CSS Tooltip
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.
CSS Tooltips and Speech Bubbles
In this article, Konigi experiments with two different methods for delivering pure CSS tooltips. The first uses title and the second uses a span.
CSS Tooltips by Adam Whitcroft
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.
Pure CSS Tooltips – Trezy.com
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.