Taskar.UI.HoverBubble = (function(UI){  
  var Widget = Class.create({
    initialize: function(element, e){
      this.element        = $(element);
      this.hoverElement   = null;
      this.positionate(e);
    },
    positionate: function(e){
      if (e.findElement('aside')){
        this.hover(e.findElement('.link:not(.selected)'));
        this.element.setStyle({
          display:  'block',
          top:      e.pointerY() + 20 + 'px',
          left:     e.pointerX() + 'px'
        });
      } else {
        this.element.hide();
      }
    },
    hover: function(element){
      if (element != this.hoverElement){
        this.hoverElement && this.hoverElement.removeClassName('hover');
        this.hoverElement = element && element.addClassName('hover');
      }
    },
    unhover: function(){
      if (this.hoverElement){
        this.hoverElement.removeClassName('hover');
        this.hoverElement = null;
      }
    },
    destroy: function(){
      this.unhover();
      this.element.hide();
      this.element = null;
    }
  });
  
  function createWidget(e){
    this.instance = new Widget('info_bubble', e);
    this.move     = moveWidget;
  }
  
  function moveWidget(e){
    this.instance.positionate(e);
  }
  
  var controller = {
    instance: null,
    move:     createWidget,
    hide:     function(){
      if (this.instance){
        this.instance.destroy();
        this.instance = null;
        this.move = createWidget;
      }
    }
  };
  
  return controller;
})();
@@ -97,16 +97,33 @@
 element,
+ showOn, hoverOn,
  e)%7B%0A   
@@ -189,24 +189,97 @@
 t   = null;%0A
+      this.showOn         = showOn;%0A      this.hoverOn        = hoverOn;%0A
       this.p
@@ -358,15 +358,19 @@
 ent(
-'aside'
+this.showOn
 ))%7B%0A
@@ -391,45 +391,51 @@
 over
-(e.findElement('.link:not(.selected)'
+On && this.hover(e.findElement(this.hoverOn
 ));%0A
@@ -1226,16 +1226,49 @@
 bubble',
+ 'aside', '.link:not(.selected)',
  e);%0A   

generalize the HoverBubble a little