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.
