var ToolTip = new Class({

   initialize: function (trigger, content, options) {

      this.setOptions({
         duration: 300,
         transition: Fx.Transitions.linear,
         wait: false,
         tooltipClass: "yoo-tooltip",
         style: "default",
         width: "250",
         display: "inline",
         mode: "cursor",
         sticky: 0
      }, options);

      this.open = false;

      this.trigger = $(trigger);

      this.tooltip= (new Element("div", {class: this.options.tooltipClass, styles: {position: "absolute", top: 0, left: 0, "z-index": 10, visibility: "hidden", width: this.options.width}})).injectTop(document.body);

      this.tooltip_style = (new Element("div", {class: this.options.style})).injectInside(this.tooltip);
      this.tooltip_tl = (new Element("div", {class: "tooltip-tl", styles: {width: this.options.width}})).injectInside(this.tooltip_style);
      this.tooltip_tr = (new Element("div", {class: "tooltip-tr"})).injectInside(this.tooltip_tl);
      this.tooltip_t = (new Element("div", {class: "tooltip-t", styles: {height: 15}})).injectInside(this.tooltip_tr);
      this.tooltip_l = (new Element("div", {class: "tooltip-l", styles: {width: this.options.width}})).injectAfter(this.tooltip_tl);
      this.tooltip_r = (new Element("div", {class: "tooltip-r"})).injectInside(this.tooltip_l);
      this.tooltip_m = (new Element("div", {class: "tooltip-m"})).injectInside(this.tooltip_r).setHTML(content);
      this.tooltip_bl = (new Element("div", {class: "tooltip-bl", styles: {width: this.options.width}})).injectAfter(this.tooltip_l);
      this.tooltip_br = (new Element("div", {class: "tooltip-br"})).injectInside(this.tooltip_bl);
      this.tooltip_b = (new Element("div", {class: "tooltip-b"})).injectInside(this.tooltip_br);
      this.tooltip_arrow = (new Element("div", {class: "tooltip-arrow", styles: {height: 23}})).injectInside(this.tooltip_b);

      if (this.options.sticky) {this.close = (new Element("div", {class: "tooltip-close"})).injectInside(this.tooltip_tl);}

      this.fx = new (Fx.Styles)(this.tooltip, this.options);

      this.trigger.addEvent("mouseenter", this.show.bindWithEvent(this));

      if (this.options.sticky) {
         this.close.addEvent("mouseenter", this.hide.bindWithEvent(this));
      } else {
         this.trigger.addEvent("mouseleave", this.hide.bindWithEvent(this));
      }

   },

   show: function (event) {
      if (!this.open) {
         this.pos = this.position(event);
         this.tooltip.setStyles({opacity: 0, top: this.pos.top + "px", left: this.pos.left + "px"});
         this.fx.start({opacity: 1, top: this.pos.top - 10 + "px"});
         this.open = true;
      }
   },

   hide: function (event) {
      if (!(this.pos==undefined)) {
         this.fx.start({opacity: 0, top: this.pos.top - 20 + "px"});
      }
      this.open = false;
   },

   position: function (event) {
      var trg = this.trigger.getCoordinates();
      var tip = this.tooltip.getCoordinates();

      if (this.options.mode == "cursor") {
         var event = new Event(event);
         trg = $extend(trg, {top: event.page.y, left: event.page.x, width: 0});
      }
      return {top: trg.top - tip.height, left: trg.left - tip.width / 2 + trg.width / 2};
   }

   } // initialize: function (trigger, content, options) {

); // var ToolTip = new Class({

ToolTip.implement(new Options);