Tooltip Scripts

Cool DHTML Tooltip

This is a practical, elegant DHTML tooltip script. Use it to display additional information about a link or any other element when the mouse moves over it. A customizable tooltip pops up, which works in all modern DHTML browsers- IE4+, NS6+, and Opera 7+….

Cool DHTML Tooltip II

Fancy tooltips with an “arrow” pointer are commonly found in desktop applications. Well, now you can add a similarly looking tooltip to your webpage! Similar in function to Cool DHTML Tooltip, the script works in IE4+, NS6+, and Opera 7+. Note that the pointer image disappears if the tooltip is too close to the edges of the browser window….

Ajax tooltip

A nice tooltip script where the content of the tooltip is retrieved by Ajax from external files.

Rich HTML Balloon Tooltip

This is a balloon style tooltip that can be applied to any link(s) on the page. What sets it apart is where it gets the tooltip messages- from ordinary DIV elements on the page containing the desired tooltip content. This fact means you can easily define tooltips with rich HTML and images inside them. In other words, any content can now easily become a tooltip message, whether you’re manually defining the tooltips, or dynamically generating them using server side languages.

A jQuery Tool Tip

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

Fixed Tooltip script

Looking for a tooltip script where the tooltip is anchored to the link’s position rather than following the mouse around? Fixed Tooltip script behaves in just this manner, unlike Cool DHTML Tooltip I or II. Whichever way you like it, we got you covered now!

Scrolling Tooltip Script

An alternate version of the tooltip script that creates a “scrolling” tooltip. Definitely more eye catching, if nothing else. (Note that in IE, the tooltip will only be enabled after the document has completed loading) View notes below for cross-browser rendering issues.

Balloon Tooltip Demonstration

Balloon tooltip demonstration.

Bottom slide tooltip

This bottom slide-in box can be used as an “aid” or “tooltip” for your page elements. Move your mouse over the element in question (must support the onMouseover event, such as <A> tag), and a description will slide in from the bottom of the browser. This script works in IE4+, NS4, and NS6+.

Textual tooltip Script

Use this script to provide textual information about a link(s)! Move the mouse over certain links, and accompanying text appears on the page describing the link. The text can be HTML based (bold, italic etc). Browsers other than NS 4 or IE 4+ will simply not see any text.

Tooltip for forms

Displays a tooltip next to form elements when the element receives focus.

Tooltip with transparent shadow

This is a tooltip script with a nice transparent shadow.

Balloon tooltip

An alternative to the alt and title attribute. Roll your mouse over the links in the example to see how this work.

Nice Titles Revised

An improved Nice Titles Tooltip Script with Accesskeys support.

jQuery plugin: Tooltip

Enhances the jQuery Library.

Nice Titles Revised

An improved Nice Titles Tooltip Script with Accesskeys support.

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.

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.

Textual tooltip II (fade into view)

Welcome to version two of the original textual tooltip script, which fades into view descriptive text when the mouse moves over their corresponding links. Effect visible in NS4+ (including NS 6) and IE 4+.

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.

Scriptaculous Effect.Tooltip

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

CSS Tooltips

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

Balloon Tooltip Demonstration

Balloon tooltip demonstration.

Information Balloon PopUps

Stu Nicholls delivers another CSS-based solutions.

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.