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>
