BlogFish

I just releases version 0.2 of my tooltip.js library.

The new version follows the mouse correctly on Firefox (thanks to Graham TerMarsch) and can apply a constant delta when displaying the tooltip. This can be useful if your CSS rules include absolute positioning that can result in a constant offset.

var my_tooltip = new Tooltip('id_of_trigger_element', 
                            'id_of_tooltip_to_show_element', 
                            { delta_x: -210, delta_y: 20 })

Another nice addition (by Xavier Lepaul) is the ability to create tooltips out of given text. Version 0.1 required you to give it the DOM id of a valid element. Version 0.2 will create a div with the class tooltip if it is given only text:

var my_other_tooltip = new Tooltip('id_of_trigger_element', 'a nice description')

This can be used to create popups out of title attributes:

Event.observe(window,"load",function() { 
  $$("*").findAll(function(node){
    return node.getAttribute('title');
   }).each(function(node){
     new Tooltip(node,node.title);
     node.removeAttribute("title");
   });
}); 

You can get tooltip.js here and you can try out the live demo.

For a recent project I needed JavaScript tooltip functionality for showing detail information. All tooltip libraries that I came across were too complicated and bloatet, did just too much and most of the time were still not flexible enough with the tooltip. So I decided to create my own library that is based on prototype.js:

<script src="/javascripts/prototype.js" type="text/javascript"></script>
<script src="/javascripts/tooltip.js" type="text/javascript"></script>

<div id='tooltip' style="display:none; margin: 5px; background-color: red">
  Detail infos on product 1....<br />
</div>

<div id='product_1'>
  This is product 1
</div>

<script type="text/javascript">
  var my_tooltip = new Tooltip('product_1', 'tooltip')
</script>

Now whenever you trigger a mouseOver on the `trigger` element, the tooltip element will be shown slightly below the mouse pointer. On the mouseOut event the tooltip disappears. The script is clever enough to move the tooltip to the top and/or left if there is not enough space left on the screen to display the tooltip.

This way you are totally flexible with the tooltip. It can be any div with any CSS you like.

You can use my_tooltip.destroy() to remove the event observers and thereby the tooltip.

At the moment the tooltip appears and hides with Element.show() and Element.hide() but a future version will use the script.aculo.us effects.

Download it here (BSD license): tooltip-v0.1.js

UPDATE:
I've put up an online demo here. In the future more updates can be found here.