Display TOOLTIP in angular js on mouseover

Define module and controller for Angular JS application. Controller class contains business logic behind the application. Create a html page and bind it  to controller using data-ng-controller directive.

1. Inside html file create a <div> where you want to display output on mouseover. output is getting displayed based on 'temp' variable value.

 <div data-ng-show="temp">{{TOOLTIP}}</div>  

2. Create two functions inside controller.

• hoverIn function takes a input and set the value of 'temp' to true.
• hoverOut function  set temp variable to false. 

  $scope.hoverIn = function (value) {  
       $scope.temp = true;  
       $scope.TOOLTIP= value;  
      }  
  $scope.hoverOut = function () {  
       $scope.temp = false;  
      }  

3. Populating table header with data-ng-repeat.

• When you hover on particular table header, hoverIn function is getting called with tooltip value.
• When mouse leaves column, hoverOut function is getting executed and it sets temp value to false. so previously displayed tooltip will disappear. 

 
       <table style="border: 1px solid black; margin: 0px auto;">  
           <thead>  
             <tr>  
               <th style="border: 1px solid black" data-ng-repeat="v1 in tableColumns"  
                 ng-mouseover="hoverIn(v1.TOOLTIP)" ng-mouseleave="hoverOut()">  
                 <span>{{v1.title}}</span>
               </th>  
             </tr>  
           </thead>  
         </table>