Opentip is a Javascript Class built on the Prototype framework. It provides easy to use tooltips. Yes - it's free, open source and comes with different styles!

Demos

Styles

We offer a view styles, and it's easy to create your own styles.

Effects

You can easily use any effect to make a tooltip appear or disappear. Opentip uses CSS3 or Scriptaculous to animate.

Events

Joints & targets

With joints and targets it's extremely easy to position your tooltips exactly where you want them.

Stems

If you activate a stem, it gets automatically positioned at the tooltip joint, but you can overrule the position.

AJAX

By adding one option, your opentip automatically downloads content with Ajax.

Creating a tooltip is really easy.
The easiest way is to define the tooltip via element tags:

<div ot="Shown after 2 seconds." ot-delay="2.0"></div>

All options to define your tooltip can be passed like this. Just prefix them with ot- and use dashes (eg.: ot-show-effect="blindDown").

Or you can define it in the element event (be sure to pass the event):

<div onmouseover="javascript:Tips.add(this, event, 'content', 'optional title');"></div>

...or create it externally. Following approaches are identical:

Tips.add('elementId', 'content', 'optional title');

$('elementId').addTip('content', 'optional title');

To create a more complex tooltip, you pass an option object to the tooltip:

$('elementId').addTip('content', {

  stem: true,

  tipJoint: [ 'bottom', 'top' ],

  showOn: 'click',

  ajax: { url: 'address' },

  etc...

});

I'm currently working on porting Opentip to jQuery. There is a lot to be done, but I guess it will be ready in October.

For further information, please read the full documentation!
Have fun.