title: What is the 'angular' way of displaying a tooltip / lightbox?
body: <p>I've been looking around and have not been quite able to get a clear path to the 'angular' way of accomplishing the following.  What I'm trying to achieve is displaying a tooltip with information when hovering over a link within an ng-repeat loop.  Based on my research, I understood that this is part of the view, and so I should probably handle this in a directive.  So, I created an attribute directive called providertooltip.  The html declaration is below:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr id="r1" ng-repeat="doc in providers"&gt;     
          &lt;td&gt;
              &lt;a providertooltip href="#{{doc.Id}}" ng-mouseover="mouseOverDoc(doc)" ng-mouseleave="mouseLeave()"&gt;{{doc.FirstName}} {{doc.LastName}}&lt;/a&gt; 
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table
  &lt;div id="docViewer" style="display:hidden"&gt;
      &lt;span&gt;{{currentDoc.FirstName}} {{currentDoc.LastName}}&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the module, I declare my directive, and declare my mouseOver and mouseLeave functions in the directive scope.  I also 'emit' an event since this anchor is a child scope of the controller scope for the page.  On the controller function (docTable ) which is passed as a controller to a router, I listen for the event.  Partial implementation is seen below:</p>
  
  <pre><code>app.directive("providertooltip", function() { 
    return {    
      restrict : 'A',        
      link: function link(scope, element, attrs) {
          //hover handler
          scope.mouseOverDoc = function(doc){
              scope.currentDoc = doc;
              scope.$emit('onCurrentDocChange');
              element.attr('title',angular.element('#docViewer').html());                    
              element.tooltipster('show');
  
             //docViewer
          };
           scope.mouseLeave = function() {
              element.tooltipster('hide');
          }
      }  
  }});
  
  function docTable(docFactory, $scope, $filter, $routeParams) {
  
      $scope.$on('onCurrentDocChange',function(event){
          $scope.currentDoc = event.targetScope.currentDoc;
          event.stopPropagation();
      });
  }
  </code></pre>
  
  <p>Ok, so here is my question.  All of the works as expected; Actually, the tooltip doesn't really work so if someone knows a good tooltip library that easily displays div data, please let me know.  But, what I'm really confused about is the binding.  I have been able to get the tooltip above to work by setting the title ( default tooltip behavior ), but I can see that the binding has not yet occured the first time I hover of a link.  I assume that the onCurrentDocChange is not synchronous, so the binding occurs after the tooltip is displayed.  If I hover over another link, I see the previous info because as I mentioned the binding occurs in an asynchronous fashion, i.e., calling scope.$emit('onCurrentDocChange') doesn't mean the the parent scope binds by the time the next line is called which shows the tooltip.  I have to imagine that this pattern has to occur often out there.  One scope does something which should trigger binding on some other part of the page, not necessarily in the same scope.  Can someone validate first that the way I'm sending the data from one scope to the other is a valid?  Moreover, how do we wait until something is 'bound' before affecting the view.  This would be easier if I let the controller mingle with the view, but that is not correct.  So, I need the controller to bind data to the scope, then I need the view to 'display a tooltip' for an element with the data.  Comments?</p>