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.
Implementation
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...
});
jQuery
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.
Documentation
For further information, please read the full documentation!
Have fun.