Hire our team

Impressed with Cooltips? Take a look at other products we’ve built.

Download version 1.0

Full package. Includes prototype.js, script.aculo.us library, unit- and functional tests!

Cooltips is the personal project made by Andrew Okonetchnikov. Your donations will help to keep it going. Say “thanks” by making a small donation!

What is CoolTips?

CoolTips is a lightweight unobtrusive JavaScript web-browser tooltips replacement technique.

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 technique is still under development. Please feel free to comment or submit your bugs here: http://code.google.com/p/tooltips/

Examples

Here are a few examples of CoolTips. Hover mouse cursor on links.

Form example

CoolTips Features

  • Lightweight. CoolTips is very lightweight and uses industry-standard libraries — prototype and script.aculo.us.
  • NEW! Customizable look&feel. You can customize the look of different CoolTips instances using bunch of parameters or CSS.
  • Browser and platform independent. Tested on Windows and Mac. Firefox, Opera, Safari, Internet Explorer 6 & 7.
  • Supports transitional effects. Fade in &out appearing.

CoolTips on Google.Code

Found a bug or have something to say? Just check CoolTips project on Google.Code: http://code.google.com/p/tooltips/

Installation & Usage

  1. Download CoolTips and unpack to your /includes directory (you also need a prototype + script.aculo.us files there (included to CoolTips package).
  2. Include the following JavaScript files in your pages: 
    <script type="text/javascript" src="includes/prototype.js"></script>
<script type="text/javascript" src="includes/scriptaculous.js&load=builder,effects"></script>
<script type="text/javascript" src="includes/tooltips.js"></script>
  3. Include the CSS file tooltips.css in your pages: 
    <link rel="stylesheet" href="includes/tooltips.css" type="text/css" 
media="screen" />

Reference

The CoolTips Class

CoolTips is an OO-style Class. It is fully unobtrusive, so you don't have to write inline JavaScript code. All you need is to set title attribute on elements. The contents of title attribute will be shown inside the tooltips.

Setting Up

Use any CSS-query for CoolTips initialization. For instance:

<script type="text/javascript" charset="utf-8">
	$$("ul .help").each( function(link) {
		new Tooltip(link, {mouseFollow: false});
	});
	$$("p .help").each( function(input) {
		new Tooltip(input, {backgroundColor: "#333", borderColor: "#333", 
		textColor: "#FFF", textShadowColor: "#000"});
	});
	$$("form input.help").each( function(input) {
		new Tooltip(input, {backgroundColor: "#FC9", borderColor: "#C96", 
		textColor: "#000", textShadowColor: "#FFF"});
	});
</script>

CoolTips Options

  • backgroundColor: color, string Background color. Default is '#999'.
  • borderColor: color, string Border color. Default is '#666'.
  • textColor: color, string Text color. Default value is from CSS.
  • textShadowColor: color, string Text shadow color (works only in Safari yet). Default value is from CSS.
  • maxWidth: integer Maximum allowed tooltip width in pixels. Default is 250.
  • delay: integer, ms Delay before tooltips appearing in milliseconds. Default is 250.
  • mouseFollow: boolean 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.