출처 : http://www.illustate.com/playground/scriptaculous/tooltip/

Effect.Tooltip

A simple tooltip build on top of Script.aculo.us
requires: Prototype and Script.aculo.us

If you have something to contribute, added a new feature or if you've got a bug to report.
Let me know

Usage

new Effect.Tooltip(element, content, {title : 'title', className: 'class', offset: {x:0, y:0}});

CSS Examples

/* Style your tooltips with css */
 
/* Simple */
.tip .title { 
  font: italic 17px Georgia, serif; 
  padding: 5px; 
  display: block; 
  background: #0F6788; 
  color: #fff; 
}
.tip .content { 
  font-size: 11px; 
  padding: 5px; 
  width: 150px; 
  background: dodgerblue; 
  color: #fff; 
}
 
/* Tooltip with a border and fixed width */
.borderedTip { width: 200px; }
.borderedTip .title { 
  border: 5px solid #999999; 
  border-bottom: none; 
  padding: 5px; 
  font: italic 17px Georgia, serif; 
  display: block; 
  background: #606060; 
  color: #fff; 
}
.borderedTip .content { 
  font-size: 11px; 
  padding: 10px; 
  background: #808080; 
  color: #fff; 
  border: 5px solid #999999;
  border-top: none;
}

/* Style your tooltips with css */

/* Simple */
.tip .title { 
  font: italic 17px Georgia, serif; 
  padding: 5px; 
  display: block; 
  background: #0F6788; 
  color: #fff; 
}
.tip .content { 
  font-size: 11px; 
  padding: 5px; 
  width: 150px; 
  background: dodgerblue; 
  color: #fff; 
}

/* Tooltip with a border and fixed width */
.borderedTip { width: 200px; }
.borderedTip .title { 
  border: 5px solid #999999; 
  border-bottom: none; 
  padding: 5px; 
  font: italic 17px Georgia, serif; 
  display: block; 
  background: #606060; 
  color: #fff; 
}
.borderedTip .content { 
  font-size: 11px; 
  padding: 10px; 
  background: #808080; 
  color: #fff; 
  border: 5px solid #999999;
  border-top: none;
}