<pre><code class=”lang-html”><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>
</code></pre>
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/264603.html