Demo and Download

40+ Tooltips Scripts With AJAX, JavaScript & CSS

2009-07-31T13:51:00.000-07:00

Tooltips: AJAX & JavaScript Solutions

Nice Titles Revised
An improved Nice Titles Tooltip Script with Accesskeys support.

A lightweight prototype based JavaScript tooltip

Nice Titles
A classic. The script uses a background image.

AJAX-enabled Help-BalloonsHelp windows in baloon-design. AJAXified version is also available.
jTip – A jQuery Tool Tip
Extensive AJAX-based tooltips with numerous functions and presentation possibilities.
jQuery plugin: Tooltip
Enhances the jQuery Library.
qTip
Works for all elements, not only for links in most browsers - IE 5.5+, Firefox, Safari and Opera.
Form field hints with CSS Tooltips
t’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.
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.
BoxOver
Flexible DHTML-Tooltipp in numerous formats. Appears (almost) immedately and fades in during loading.
SuperNotes
Converts footnotes to tooltips. Appears immediately and can be assigned with a fixed position in the browser window.
Tipster
Multifunctional tool tips with JavaScript.
5 Tooltips by DHTMLGoodies
First version is suppose to improve the usability of online forms:
The second technique uses AJAX.
Walter Zorns JavaScript, DHTML Tooltipps
These tooltips can be used for different purposes; the code is well-documented and can easily be improved and modified.
clueTip
This is a demo page for the new clueTip — a jQuery-based, AJAX-powered tooltip. The clueTip plug-in was inspired by Cody Lindley’s jTip script.
Mootools Tooltip
Mootools Javascript example of using tooltips.
Sweet Titles
JavaScript Fading Tooltips.
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.
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.
overLIB
This JavaScript-library can be used in a variety of ways; many positioning and appearance features are available.
Scriptaculous Effect.Tooltip
The tooltip script from the script.aculo.us library.
Tooltip.js
Tooltipps with AJAX. The library uses the Prototype JavaScript Framework. The demo doesn’t work any longer.

CSS-Based Solutions

CSS Tooltips
A simple demonstration of using custom CSS tooltips as a drop-in replacement for the browser-based title attribute.
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.
Unobtrusive and Slightly Accessible CSS Tool Tips on Semi Transparent CSS Menus
The scripts creates half-transparent tooltips with shadows.
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.
Balloon Tooltip Demonstration
Balloon tooltip demonstration.
CSS Tooltipps, lixlpixel Javascript Tooltips
Similar scripts from the same source:
CSS Rollovers for Tooltips
CSS Bubble Tooltips
This example will show you how well this tooltip stretches for long descriptions.
Pure CSS Tooltips I
Simple, accessible “more” links - v2
CSS-based solution for displaying tooltips.
CSS Tooltips
Another solution, based only on CSS.
Information Balloon PopUps
Stu Nicholls delivers another CSS-based solutions.

Further Solutions

Snap.com
Snap gives you a visual preview of each result before you click on it. And that improves your odds of picking the right search, without clicking back-and-forth several times.
DHTML Tooltips
Popup a help tip or information layer onmouseover using this object-based DHTML tooltip code. The basic version, presented on this page, can contain plain text or rich html, images, or images and text. The tooltip can be displayed over a background image. It can move with mouse movement. And it is easy to customize and modify.
Animated Tooltip Javascript
DOM Tooltip
DOM Tooltip Script-Library
Yahoo! UI Library: Tooltip
The Yahoo! UI Library Toolbox provides among other functions also tooltips.

Tooltips: Wordpress-Plugins

WP - Bubble Tooltips (Plugin)
A Wordpress-Plugin can change the appearance of links. Based on Bubble Tooltipps developed by Web-Graphics.
FancyTooltips
Further Wordpress-Plugin with similar functionality.
Fancy Tooltips

Selected Scripts: Quick Overview

(Original poste)

AJAX Search XML

2009-07-31T13:39:00.000-07:00

AJAX Database

2009-07-31T13:26:00.000-07:00

AJAX can be used for interactive communication with a database.

Useful Ajax Auto Suggest scripts collection

2009-07-31T11:14:00.001-07:00

1. Ajax Auto Suggest v.2

The AutoSuggest class adds a pulldown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the enter key. The values for the suggestion list are to provided as XML, or as JSON (by a PHP script, or similar). This auto suggest class is very simple to customize and reuse in your web pages.

2. Woork PHP component: Autosuggest

Woork Autosuggest is a simple "PHP component" ready to use which implement autosuggest feature using PHP and MySQL. The component is lightweight (only with 8Kb) and ready to use simply customizing some parameters.

3. Spry Auto Suggest Widget

Spry Auto Suggest Widget (provided from Adobe Labs) use Adobe Spry framework to implement auto suggest feature in a input field. This is an example of using a Spry region and non-destructive filter to create an auto suggest widget. The suggestions can be displayed in any HTML structure. Spry uses the the tag ID to identify the suggest list container. In this example, there are three different HTML structures based on: table, div-span, ul-li.

4. Facebook-Like Auto Suggest

Guillermo Rauch's Facebook-like Auto Suggest is another auto suggest script which simulate Facebook auto suggest feature. It works by caching all the results from a JSON Request and feeding them to the autocompleter object. When a item is added as a box, it’ removed from the feed array, and when the box is disposed it’s added back, so that it becomes available in the list when the user types.

5. jSuggest 1.0

jSuggest is yet another auto-completer for your text input box. It mimics the functionality of Google suggest. jSuggest will also bind item selection to your up and down arrows and also allow you to select the suggestions using your mouse.

6. Yahoo! UI Autosuggest Control

Yahoo! UI Autosuggest Control uses AutoComplete to find images by tag from the Flickr webservice. A simple PHP proxy is used to access the remote server via XHR. The generateRequest() method has been customized in order send additional required parameters to the Flickr application. The formatResult() method has been customized in order to display images in the results container, and the default CSS has been enhanced so the results container can scroll. Finally, a itemSelectEvent handler has been defined to collect selected images in a separate container.

7. CAPXOUS.AutoComplete

CAPXOUS.AutoComplete is a standalone widget without dependencies, lightweight (only 4 kb) which provides auto suggest feature with an huge scrollable drop down list. It's simple to customize and implement on your web pages with a lot of languages.

8. jQuery Tag Suggestion

jQuery Tag Suggestion plugin simulates del.icio.us tag suggestion as-you-type feature (when you save a bookmark on del.icio.us). Tag suggestion helps you create a subset of tags that you commonly use for different types of links.

9. Google Suggest Style Filter with the AutoComplete Control

Matt Berseth's AutoComplete control provides smarter filtering capabilities for data tables which allow the user to select a filter column from a drop down list. Take a look here for the live demo.