An improved Nice Titles Tooltip Script with Accesskeys support.

A lightweight prototype based JavaScript tooltip

2 – Nice Titles

A classic. The script uses a background image.

3 – AJAX enabled Help Balloons

Help windows in baloon-design. AJAXified version is also available.

4 – jTip – A jQuery Tool Tip

Extensive AJAX-based tooltips with numerous functions and presentation possibilities.

5 – jQuery plugin: Tooltip

Enhances the jQuery Library.

6 – qTip

Works for all elements, not only for links in most browsers – IE 5.5+, Firefox, Safari and Opera.

7 – Form field hints with CSS Tooltips

It’s a basic example of how helpful a little JavaScript and CSS can be in a form. Instead of the input hints always showing and potentionally cluttering a very simple form, only the hint for the currently focused input will show. This article will show a way to do this.

8 – JS Tooltip

Displays customizable tool tip message for each link element on a web page. A tool tip that can be added to the anchor element unobtrusively by adding a class value to it. This was done by having the tool tip message pull from the specific title attribute of the anchor element that the tool tip was added too.

9 – BoxOver

Flexible DHTML-Tooltipp in numerous formats. Appears (almost) immedately and fades in during loading.

10 – SuperNotes

Converts footnotes to tooltips. Appears immediately and can be assigned with a fixed position in the browser window.

11 – Tipster

Multifunctional tool tips with JavaScript.

12 – 5 Tooltips by DHTMLGoodies

First version is suppose to improve the usability of online forms.

The second technique uses AJAX.

13 – Walter Zorns JavaScript, DHTML Tooltips

These tooltips can be used for different purposes; the code is well-documented and can easily be improved and modified.

14 – clueTip

A jQuery-based, AJAX-powered tooltip. The clueTip plug-in was inspired by Cody Lindley’s jTip script.

15 – Mootools Tooltip

Mootools Javascript example of using tooltips.

16 – Sweet Titles

JavaScript Fading Tooltips.

17 – Hover Tip

Tooltip with menu-like capabilities. The tooltip layer will remain visible while the viewer hovers over it. This allows you to place clickable links inside tooltip content.

18 – Multiline Tooltip with HTML, CSS and JavaScript

This document explains how to make nice multiline tooltip for HTML documents, using simple and standard CSS, HTML and JavaScript.

19 – overLIB

This JavaScript-library can be used in a variety of ways; many positioning and appearance features are available.

20 – Scriptaculous Effect.Tooltip

The tooltip script from the script.aculo.us library.

CSS Only ToolTips

21 – CSS Tooltips

A simple demonstration of using custom CSS tooltips as a drop-in replacement for the browser-based title attribute.

22 – CSS Technique for Tooltips

CSS can create “faux tooltips” much the same as the JavaScript ones, but without all the (possibly) undesirable scripting. There are a few in’s and out’s involved, but surprisingly, the methods are rather easy to accomplish.

23 – Unobtrusive and Slightly Accessible CSS Tool Tips on Semi Transparent CSS Menus

The scripts creates half-transparent tooltips with shadows.

24 – CSS Menu Descriptions

This is a CSS technique that could be useful if you want to give users accessible added content such as tool-tips, notifications, or alerts, without adding unnecessary clutter to your page. And since it doesn’t rely of JavaScript, it should be useful to everyone, even disabled users.

25 – Balloon Tooltip Demonstration

The balloon.js package is written in object-oriented JavaScript and allows you to add configurable balloon tooltips (AKA popup balloons, bubbles, rollover tooltips etc., etc.) to your website. It was written for scientific web applications, such as GBrowse and WormBase, but is generic and portable to most websites.

26 – lixlpixel CSS Tooltips

27 – lixlpixel Javascript Tooltips

28 – CSS Rollovers for Tooltips

29 – CSS Bubble Tooltips

Avoid cross-browser javascript when you can use css to make tooltips with less code.

30 – Pure CSS Tooltips

31 – CSS Tooltips

Another solution, based only on CSS.

32 – Information Balloon PopUps

Stu Nicholls delivers another CSS-based solutions.

The solution: Google AJAX Libraries APIs. Google hosts these frequently used files, including the newest versions (and legacy versions) of jQuery MooTools, YUI, Dojo, Prototype, and more. Why use Google’s AJAX Libraries API? Benefits include:

• Google’s servers can serve the file faster than your shared hosting server.
• Since the file is always being pulled from the same place, the more sites that use that file, the more likely that file is already in the user’s cache. Thus, your website loads faster.
• You save bandwidth.

Here’s how you implement google.load().

<!-- Always need this javascript -->
<script src="http://www.google.com/jsapi" type="text/javascript"></script>

  google.load("jquery", "1.3.2");
  google.load("jqueryui", "1.7.2");
  google.load("prototype", "1.6.1.0");
  google.load("scriptaculous", "1.8.3");
  google.load("mootools", "1.2.4");
  google.load("dojo", "1.3.2");
  google.load("swfobject", "2.2");
  google.load("yui", "2.8.0r4");
  google.load("ext-core", "3.0.0");

That’s all there is to it. Pass Google the library and version you desire and Google does the rest.