Adding Fancy Tooltips to your Website

// Code, Cool Links, Design, Design Resources, Featured, Geeks, The Best of.., Tutorial, webdesign, webmaster

Tooltips! Pretty nifty but so 1994! But this is 2009 and tooltips can get a whole lot more interesting by taking advantage of Javascripts, CSS, Ajax with HTML. Read on for over 20 Cool ToolTip codes..with demo screenshots!
Sound too complicated? Come on whimpy..keep reading..

Bullet Tool Tips

Installation and customization of Bubble Tooltips is quite easy. They are composed mainly of four parts:

A small javascript file of about 2Kb
A small CSS for their presentation
A single image in gif format for their graphics
Four lines of HTML in the head section of the page(s)

Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page.

Bubble Tooltips | Demo

What is a Tooltip? Come on we all know this one. But Tooltips can get a whole lot mo beta! Using DHTML, CSS/Javascripts and AJAX!

Here is an example of your average HTML Tooltip Here!

There are several different types of tooltips available out there and here are a few of them for your consumption. Make sure to show off when you implement it in your blog! Leave your link in the comment section.

Better Tip

BetterTip is a plugin for the JQuery library that allows you to create custom tool tips. It is based on Cody Lindley’s jTip, but it is much more flexible.

Better Tip

Code: qTip

qTip | Demo

jQuery InputHintBox

jQuery InputHintBox

MooTools

Moo Tools Tips | Demo

Pop-Up Balloons

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.

The balloons are dynamically sized in both the vertical and horizontal dimensions and the left/right/up/down orientation is calculated automatically based on the position of the cursor. Balloon contents can be provided locally in your own HTML or remotely via AJAX.

Popup Balloon

BoxOver Effect

BoxOver uses

javascript / DHTML to show tooltips on a website. Implementation of the tooltips, however, requires no knowledge of DHTML or

javascript.

BoxOver | Demo

Slider Tooltips using Ajax

slide-toolip

With the slider tooltip your visitors can get an idea of what can be found on the page before actually navigating to it. A little more nifty then needed for most but if you want to impress this will do it.

Slider DataPager with Dynamic Tooltips | Demo

JavaScript Fading Tooltips

Improved tooltip effect, lighter codes with titles get cut of at maximum of 25 characters

JavaScript Fading Tooltips

Nice Titles – Transparent Tooltip Effect

Modified version. Check out original Nice Title tooltip – here.

Nice Title (revised) | Demo

Tipster v3.1 RC

Highly customizable

Javascript tooltip.

Tipster v3.1 | Demo

dhtmlgoodies Ajax tooltips

dhtmlgoodies has couple of nice tooltips like Tooltip for forms, Ajax tooltip, Tooltip with transparent shadow, etc.

DHTML Tooltips

DHTML Tooltips!

The code offers a variety of options for source and type of tooltip content and flexible control of positioning, formatting and display.

Good Looking Tooltips (glt)

GLT is short for Good-Looking Tooltips and it is a small JavaScript library that you can include to spice up the look of your tooltips in your web page.