25 Useful Resources for Creating Tooltips With JavaScript or CSS

by 

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.

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.

Joshua Johnson

Equal parts editor, writer, designer, & photographer. Hit me up on Twitter, read my Mac tutorials or check out my photos.

Zemanta plugin for WordPress.com

WordPress.com has partnered with the folks at Zemanta to make blogging easier and faster by letting you quickly add recommended links, photos, tags, and related posts. With just a few clicks your post goes from simple to snazzy.

For a full set of questions and helpful answers on how to use Zemanta, please see this full detailed FAQ.

How to Activate Zemanta


To activate Zemanta, go to Users -> Personal Settings in your WordPress Dashboard.

You’ll see a new option near the end of the page called Additional Post Content that lets you add Zemanta to your posts. Selecting this option turns on Zemanta, and you can turn it off at any time by unchecking the box.

Be sure to save your changes by scrolling to the bottom of the page and clicking Save Changes.

There’s also a different way around on how to turn on your Zemanta plugin.

Click on Add new, just as if you would want to create a new post.

On the upper right corner you shall find the drop down menu called Screen Options. Tick the box next to Use Zemanta to find related content. For the Zemanta plugin to appear, you’ll have to refresh the site.

If you have already been doing some editing on your blog post, do not forget to save it, because WordPress doesn’t support auto-save function anymore! Here are some screenshots on where to find that option (click on it to expand).

After refreshing the site, Zemanta’s Recommendations widget should appear on the right side of your screen.

How It Works

When you create a new post you will see a Recommendations module in your edit post window. (You may have to scroll down fairly far in your edit window to find the module. You can drag the module up higher if you prefer — see screenshot above). Once you have started writing the post, you can click Refresh to have Zemanta generate recommendations for you.

The more information you have in the post, the more recommendations it can give you. Clicking Update will refresh the results, which is useful if the topic of your post has changed a little from the first time you hit the refresh button. The filter option is not your classic search as it still takes into account your text, but it also allows you to specify a term that the Zemanta recommendation engine should keep an eye out for while suggesting content

As you write your blog post, Zemanta is analyzing your text behind the scenes and picking up the most important keywords. These keywords are then translated into your suggested tags/labelsimagesrelated posts and in-text links.

In this example, the user has clicked on a recommended photo, as well as an article and a recommended link (located below the post). Zemanta automatically adds them into your post as you click on them.

Here’s how the post looks after it’s been spiffed up by Zemanta:

Pretty nice, eh? 🙂

A Few More Details

You can use as many of the Zemanta recommendations as you like, or you can ignore of all of them — totally up to you! Once you’ve added recommendations, you’ll need to manually delete any that you don’t want.

Currently, Zemanta works on English-language blogs. It only works in the visual editor mode. It’s not available on private blogs. Photos recommended by Zemanta are copyright-cleared, but we encourage you to check out the photo’s license if you have any doubts (you can do that by hovering over the photo).

Video


Link Love – Why is linking out good for you (by Zemanta – social blogging) from zemanta on Vimeo.