Angular-material-tooltips
提供:Dev Guides
角度材料-ツールチップ
Angular Materialは、目立たないツールチップをユーザーに表示するためのさまざまな特別な方法を提供します。 それらに方向を割り当てる方法を提供し、 md-tooltip ディレクティブを使用してツールチップを表示します。 ユーザーが親コンポーネントにフォーカス、ホバー、またはタッチすると、ツールチップがアクティブになります。
属性
Sr.No | Parameter & Description |
---|---|
1 |
md-visible これはブールバインドされ、ツールチップが現在表示されているかどうかを決定します。 |
2 |
md-delay ユーザーが親にフォーカス、ホバー、またはタッチした後、ツールチップの表示を待機するミリ秒。 デフォルトでは、300msです。 |
3 |
md-autohide ブール値が存在するか提供されている場合、ツールチップはフォーカスに関係なく、マウスを離すと非表示になります。 |
4 |
md-direction これは、ツールチップが進む方向を決定します-左、右、上、下をサポートします。 デフォルトでは、方向は下方向です。 |
例
次の例は、ツールチップの使用法を示しています。
*_am_tooltips_*
<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>
結果
結果を確認します。