25 Useful Resources for Creating Tooltips With JavaScript or CSS

by on 23rd August 2013 with No Comments

screenshot

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.

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.

screenshot

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.

screenshot

Javascript Tooltip

Simple but effective. This one gives you positioning options, allows image embeds and can be triggered by a number of different events.

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

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.”

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

CSS Tooltip

A simple, lightweight, cross-browser, pure CSS tooltip. It’s a free download and only takes up a single measly kb.

screenshot

CSS Bubble Tooltips

A simple, bubbly CSS tooltip. Not much here, but it works just fine!

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

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.

Comments & Discussion

Subscribe

Membership
About the Author