Visual-Blast Magazine

Poshy Tip – a full-featured jQuery tooltip plugin that allows creating stylish tooltips in a unique and easy way.

Poshy Tip supports asynchronous loading of the tooltip content. By using callback, you can easily update asynchronously the content of the tooltip after it has been displayed. At demo page there is an example of loading  Flickr images in tooltip content.

View DEMOS

Poshy Tip uses a single background image for scalable tooltips. It detects when a background image has been set for the tooltip container DIV and creates a scalable frame from it that wraps the inner contents of the tip.

Also support advanced positioning options, you can position the tips relative to the mouse cursor or to the target element and align them in every possible way horizontally and vertically, tooltips are always displayed in the browser viewport.

Colortip Tooltip – a simple jQuery tooltip plugin which is going to convert the title attributes into a series of colorful tooltips.

6 color themes are available, red, blue, green, yellow, white and black, so you can easily match it with the rest of your design, or you can create your own colors in the plugin stylesheet.

View DEMO

You can also easily create your own tooltip designs by just including three additional style classes to your stylesheet and adding an element to the supported colors array in colortip-1.0-jquery.js

ChillTip is a simple and lightweight (0.8Kb gzipped) jQuery Tooltip Plugin that allows you to have a custom designed tooltip for your website.

Via CSS, you can easily change the tooltip background color, border color, tooltips width, and font size.

It can be used for span, img, anchor attributes and anything else that uses the title attribute. ChillTip has been tested and working in IE6+, Firefox, Google Chrome, Opera and Safari.

MooTooltips – JavaScript Tooltip with MooTools. Easily display tooltip messages from HTML elements, Ajax calls or text added manually.

View Examples

The script gives you the possibility to display tooltips either by passing the parameters on the rel parameter or by setting them manually when instanciating the class. When creating a class instance, you can set both types, inline tips and manually set ones.

qTip – a tooltip plugin for the jQuery framework. It’s cross-browser, customizable and packed full of features. (Latest update and bug fixes on March 19th, 2009)

qTip provides you with tonnes of features like rounded corners and speech bubble tips, and it’s completely free under the MIT license.

qTip comes pre-packed with 5 elegant tooltip styles for use without any extra code. You can create your own styles simply by creating a custom style in the styles object and apply it using the style.name option.

Tested with the all the major browsers on the market today.

Simple CSS Javascript tooltip – a simple and easy way to create a Javascript tooltip with jQuery using the Anchor tag REL and TITLE attributes to identify a tooltip and its content.

View example.

BeautyTips is a jQuery tooltips plugin which uses the canvas drawing element in the HTML5 spec in order to dynamically draw tooltips.

These tips are highly configurable and can be triggered in many different ways. Tested with jQuery 1.2.6 and 1.3 on Firefox 3.x, Safari 3.x (also works on iPhone!), IE 6.x+, and Opera 8+.

For IE support, be sure to use the ExplorerCanvas library created by Google to support Canvas in Explorer. To fix z-index problems with form elements in IE6, include the bgiframe plugin on your page. BeautyTips will automatically recognize it and use it.

Simpletip -  a lightweight (only 3.4Kb packed) jQuery plugin for creating nice tooltips.

It allows you to create tooltips with ease on any element on the page using the power of jQuery’s selectors and event management. The tooltips can be static, dynamic, or even loaded through AJAX with a variety of different visual effects.

Browser support: Firefox 1.5+, Internet Explorer 6.0+, Safari 2.0+ and Opera 9.0+

This tutorial will teach you how to create some basic tooltips with about 10 lines of CSS and jQuery Code.

CoolTips is used to replace conventional web-browser tooltips. The tooltips get the contents of the title attribute, so it’s fully unobtrusive. CoolTips is an OO class based on Prototype JS and script.aculo.us frameworks.

CoolTips Options:

• backgroundColor: Default is ‘#999′.
• borderColor: Default is ‘#666′.
• textColor: Default value is from CSS.
• textShadowColor: Text shadow color (works only in Safari yet). Default value is from CSS.
• maxWidth: Maximum allowed tooltip width in pixels. Default is 250.
• delay: Delay before tooltips appearing in milliseconds. Default is 250.
• mouseFollow: Tooltip will follow the mouse cursor. Default is true
• opacity: Target opacity of tooltips. Default is .75
• appearDuration: Appear fade in effect duration in seconds. Default is .25.
• hideDuration: Hide fade out effect duration in seconds. Default is .25.