var app = angular.module('ruiComponents');

app.directive('ruiTooltip', function($document, $compile) {
  return {
    restrict: 'A',
    scope: true,
    link: function(scope, element, attrs) {
      var html = '<div class="rui-tooltip">{{ text }}</div>';
      var tooltip = $compile(html)(scope);

      scope.text = attrs.ruiTooltip;

      $document.find('body').append(tooltip);

      element.bind('mouseover', function(e) {
        tooltip.addClass('rui-tooltip-show');

        //find the container of our element so that we can position our tooltip
        var containerPosition = e.target.getBoundingClientRect(),
          offset = {},
          tooltipHeight = tooltip.outerHeight(),
          topOffset = containerPosition.top + window.pageYOffset; //account for scrolling of the window

        offset.top = topOffset - tooltipHeight - 10; //-10 for the down arrow
        offset.left = containerPosition.left + (containerPosition.width / 2) - 31;
        
        tooltip.offset(offset);
      });

      element.bind('mouseout', function() {
        tooltip.removeClass('rui-tooltip-show');
      });

      //keep tooltip active if hovering over its contents
      tooltip.bind('mouseover', function() {
        tooltip.addClass('rui-tooltip-show');
      });

      tooltip.bind('mouseout', function() {
        tooltip.removeClass('rui-tooltip-show');
      });
    }
  };
});

@@ -142,12 +142,37 @@
 pe: 
-true
+%7B%0A      ruiTooltip: %22@%22%0A    %7D
 ,%0A  
@@ -259,20 +259,26 @@
 tip%22%3E%7B%7B 
-text
+ruiTooltip
  %7D%7D%3C/div
@@ -329,46 +329,8 @@
 );%0A%0A
-      scope.text = attrs.ruiTooltip;%0A%0A
     
@@ -950,19 +950,42 @@
  - 3
-1;%0A        
+0; //-31 for the tip of the arrow%0A
 %0A   
@@ -1324,32 +1324,32 @@
 ', function() %7B%0A
-
         tooltip.
@@ -1390,16 +1390,95 @@
      %7D);
+%0A%0A      element.on('$destroy', function() %7B%0A        tooltip.remove();%0A      %7D);
 %0A    %7D%0A 

clean up tooltips on destroy