hongbojing
5/21/2016 - 10:35 PM

From http://www.tutorialspoint.com/angular_material/angular_material_quick_guide.htm

From http://www.tutorialspoint.com/angular_material/angular_material_quick_guide.htm

38-tooltips.html
content_copyfile_download
<html lang="en" >
   <head>
      <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
      <script language="javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('tooltipController', tooltipController);
           
            function tooltipController ($scope) { 
               $scope.demo = {
                  showTooltip : false,
                  tooltipDirection : ''
               };
            }	  
      </script>      
   </head>
   <body ng-app="firstApplication"> 
      <div id="tooltipContainer" ng-controller="tooltipController as ctrl" layout="column" style="width:200px;margin-left: 100px; margin-right: 20px"  ng-cloak>
         <br/><br/><br/>
         <md-button class="md-raised md-primary">Hello
            <md-tooltip md-visible="demo.showTooltip" md-direction="{{demo.tooltipDirection}}">Hello World!</md-tooltip>
         </md-button>
         <p>Tool Tip Direction </p>
         <md-radio-group ng-model="demo.tooltipDirection" >
            <md-radio-button value="left">Left </md-radio-button>
            <md-radio-button value="top">Top</md-radio-button>
            <md-radio-button value="bottom"  class="md-primary">Bottom</md-radio-button>
            <md-radio-button value="right">Right</md-radio-button>
         </md-radio-group>
      </div>
   </body>
</html>