BlogFish - Jonathan Weiss

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 1.5:

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

A live demo can be found here.

<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.

If you do not want to create your own tooltip div and just want a quick tooltip functionality you can let tooltip create a div out of given text for you:

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


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

<script type="text/javascript">
  var my_tooltip = new Tooltip('product_1', 'a nice description of product 1')
</script>

You can use this functionality to create popups out of title attributes (thanks to Xavier Lepaul):

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

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

A live demo can be found here.