Prototip - Quick and Easy JavaScript Tooltips

I have a tip that can take 5 strokes off anyone's golf game. It's called an eraser. - Arnold Palmer

Introduction

One of the challenges in creating Mac OS X widgets is how to make efficient use of the user interface and the space available. In my upcoming article on the development of a Mac OS X widget for Aim Fight! (Now read the complete article!), as shown in Figure 1, I utilized tooltips to simplify the user interface while still providing help to the user. And even better, using Prototip is quick and easy, just what every developer wants to hear!

Figure 1. A tooltip example.

Specifically I used the Prototip 1.1 Library written by Nick Stakenburg. Prototip was written using the Prototype JavaScript Framework I discussed in my blog last week. Prototip also uses script.aculo.us, an innovative JavaScript Framework that provides a wide variety of animation effects.

Using Prototip

To use Prototip, you must include the library (and also the Prototype and Script.aculo.us Frameworks):

<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='js/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='js/prototip.js'></script>

Then also add the Prototip Cascading Style Sheet:

<link rel="stylesheet" type="text/css" href="css/prototip.css" />>

Creating a tooltip is easy, in the onload event of a page, you can simply add a line similar to the following:

new Tip(element, 'content');

Prototip Examples

The Prototip website provides a wide variety of tooltip examples:

Download and More Information

You can download the latest version of Prototip, version 1.1, and get more information from the Prototip website.