Angular Material - Tooltips

Angular Material provides various special methods to show unobtrusive tooltips to the users. It provides ways to assign directions for them and the md-tooltip directive is used to show tooltips. A tooltip activates whenever the user focuses, hovers over, or touches the parent component.
md-visible
This is Boolean bound and determines whether the tooltip is currently visible.
md-delay
How many milliseconds to wait to show the tooltip after the user focuses, hovers, or touches the parent. By default, it is 300ms.
md-autohide
If present or provided with a boolean value, the tooltip will hide on mouse leave, regardless of focus.
md-direction
This determines the direction in which the tooltip goes - supports left, right, top, and bottom. By default, the direction is towards bottom.
The following example shows the use of tooltips.
am_tooltips.htm
<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://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>
Verify the result.
Tool Tip Directio.

    16 Lectures 
     1.5 hours 

 Anadi Sharma

    28 Lectures 
     2.5 hours 

 Anadi Sharma

    11 Lectures 
     7.5 hours 

 SHIVPRASAD KOIRALA

    16 Lectures 
     2.5 hours 

 Frahaan Hussain

    69 Lectures 
     5 hours 

 Senol Atac

    53 Lectures 
     3.5 hours 

 Senol Atac
 Print
 Add Notes
 Bookmark this page