Ng-Mouseover-5

 
In this example of Ng-Mouseover, It will display the tooltip on mouseover. See the code
 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> <style type="text/css"> .tooltip { border: 1px solid black; width: 230px; margin-left: 58px; margin-top: -35px; background-color: darkcyan; border-radius: 4px; height: 20px; color: white; } </style> </head> <body ng-app=""> <div ng-init="tooltip=false"> <br /> <br /> <button ng-mouseover="tooltip=true" ng-mouseleave="tooltip=false"> Tooltip </button> <div class="tooltip" ng-show="tooltip">Hi..Welcome to Angular JS World.</div> </div> </body> </html>
Output