In this post we would like to present you a collection of CSS3 tooltip tutorials. Tooltips are used to display extra information when a link is hovered on. When we create links in our website it is always a good practice to add titles to the links for the benefit of SEO. These titles are displayed when you hover over a link but it lacks any branding or custom styling.

Bubble Point Tooltips with CSS3 & jQuery

Chris Coyier shows us how to recreate the bubble point tooltips from the Mac OS X Doc using CSS3 and JQuery.

CSS3 tooltips

In this tutorial you’ll learn how to create your own CSS3 tooltips: no images, no javascript.

How to Create Script-Free CSS3 Tooltips

We’re going to be making some really awesome tooltips out of pure CSS3 and then we’re going to create a mobile friendly version, and this is where it gets a little hazy because to get this to work, we have to use a little Javascript fix known as none other than Dean Edwards IE9.js.

How to Create Link Tooltips Using CSS3 and JQuery

Creating a tooltip shape using pure CSS3 without using any images.

How to create animated tooltips with CSS3

In today’s tip we’ll show you how to create some simple, animated tooltips using CSS transitions and the pseudo-classes :before and :after.

Pure CSS speech bubbles

Twitter like tooltip with transition effect with CSS3

In this tutorial You ll learn how we can create a Twitter like tooltip with CSS3 animation/ transition effect without an image.