This post originated from an RSS feed registered with Ruby Buzz by Jonathan Weiss. Original Post: A lightweight prototype based JavaScript tooltip Feed Title: BlogFish Feed URL: http://blog.innerewut.de/feed/atom.xml Feed Description: Weblog by Jonathan Weiss about Unix, BSD, security, Programming in Ruby, Ruby on Rails and Agile Development. Latest Ruby Buzz Posts Latest Ruby Buzz Posts by Jonathan Weiss Latest Posts From BlogFish

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