What is CoolTips?
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: https://github.com/okonet/cooltips
Here are a few examples of CoolTips. Hover mouse cursor on links.
- 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
Installation & Usage
- Download CoolTips and unpack to your
/includesdirectory (you also need a prototype + script.aculo.us files there (included to CoolTips package).
- Include the CSS file
tooltips.cssin your pages:
<link rel="stylesheet" href="includes/tooltips.css" type="text/css" media="screen" />
title attribute on elements. The contents of
title attribute will be shown inside the tooltips.
Use any CSS-query for CoolTips initialization. For instance:
backgroundColor: color, stringBackground color. Default is '#999'.
borderColor: color, stringBorder color. Default is '#666'.
textColor: color, stringText color. Default value is from CSS.
textShadowColor: color, stringText shadow color (works only in Safari yet). Default value is from CSS.
maxWidth: integerMaximum allowed tooltip width in pixels. Default is 250.
delay: integer, msDelay before tooltips appearing in milliseconds. Default is 250.
mouseFollow: booleanTooltip 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.