Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

feat(tooltip): Tooltip use MdPanel API #9742

Merged
merged 1 commit into from
Nov 15, 2016
Merged

feat(tooltip): Tooltip use MdPanel API #9742

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 76 additions & 52 deletions src/components/tooltip/demoBasicUsage/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,87 +1,111 @@
<div ng-controller="AppCtrl" ng-cloak>

<md-toolbar class="md-accent">
<h2 class="md-toolbar-tools">
<span flex>Awesome Md App</span>
<md-button class="md-icon-button" aria-label="refresh">
<md-tooltip md-direction="left">
Refresh
</md-tooltip>
<md-icon md-svg-src="img/icons/ic_refresh_24px.svg" style="width: 24px; height: 24px;">
<div class="md-toolbar-tools">

<h2>Awesome Material App</h2>
<span flex></span>
<md-button class="md-icon-button test-tooltip" aria-label="Refresh">
<md-tooltip md-direction="left">Refresh</md-tooltip>
<md-icon
md-svg-src="img/icons/ic_refresh_24px.svg"
style="width: 24px; height: 24px">
</md-icon>
</md-button>
</h2>

</div>
</md-toolbar>

<md-content layout-padding style="margin-left: 20px; margin-right: 20px">
<div>

<p>
The tooltip is visible when the button is hovered, focused, or touched.
Hover over the <strong>Refresh</strong> icon in the above toolbar.
</p>

<div layout="row" layout-align="space-between">
<md-button class="md-fab" aria-label="Insert Drive">
<md-icon md-svg-src="img/icons/ic_insert_drive_file_24px.svg"></md-icon>
<md-tooltip md-visible="demo.showTooltip" md-direction="{{demo.tipDirection}}">
Insert Drive
</md-tooltip>
</md-button>
<md-button class="md-fab" aria-label="Photos">
<md-tooltip>
Photos
</md-tooltip>
<md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px;"></md-icon>
</md-button>
<div style="margin-top: 20px">
<p>
The Tooltip's <code>md-z-index</code> attribute can be used to change
the tooltip's visual level in comparison with the other elements of
the application.<br />
<strong>Note:</strong> the z-index default is <strong>100</strong>.
</p>
</div>


<div style="margin-top: 40px;margin-bottom: -5px">
<p><code>md-direction</code> attribute can used to dynamically change the direction of the tooltip.<br/>
Note: the direction default value is 'bottom'. </p>
<div style="padding-left: 30px">
<md-radio-group ng-model="demo.tipDirection" >
<md-radio-button value="left"> Left </md-radio-button>
<md-radio-button value="top">Top</md-radio-button>
<md-radio-button value="bottom">Bottom</md-radio-button>
<md-radio-button value="right">Right</md-radio-button>
</md-radio-group>
<div style="margin-top: 20px">
<p>
The Tooltip's <code>md-direction</code> attribute can be used to
dynamically change the direction of the tooltip.<br />
<strong>Note:</strong> the direction default value is
<strong>'bottom'</strong>.
</p>
<div layout="row" layout-align="space-between">
<md-radio-group
ng-model="demo.tipDirection"
style="padding-left: 30px">
<md-radio-button value="top">Top</md-radio-button>
<md-radio-button value="right">Right</md-radio-button>
<md-radio-button value="bottom">Bottom</md-radio-button>
<md-radio-button value="left">Left</md-radio-button>
</md-radio-group>
<md-button class="md-fab">
<md-tooltip
md-direction="{{demo.tipDirection}}">
Insert Drive
</md-tooltip>
<md-icon
md-svg-src="img/icons/ic_insert_drive_file_24px.svg">
</md-icon>
</md-button>
</div>
</div>


<div style="margin-top: 20px;">
<div style="margin-top: 30px">
<p>
Additionally, the Tooltip's <code>md-visible</code> attribute can use data-binding to
The Tooltip's <code>md-visible</code> attribute can be used to
programmatically show/hide itself. Toggle the checkbox below...
</p>
<div style="padding-left: 37px">
<md-checkbox ng-model="demo.showTooltip" style="padding-left:30px;">
Insert Drive
</md-checkbox>
<div layout="row" layout-align="space-between center">
<div style="padding-left: 30px">
<md-checkbox ng-model="demo.showTooltip" style="padding-left: 30px">
Insert Drive
</md-checkbox>
</div>
<md-button class="md-fab" aria-label="Photos">
<md-tooltip md-visible="demo.showTooltip">Photos</md-tooltip>
<md-icon md-svg-src="img/icons/ic_photo_24px.svg"></md-icon>
</md-button>
</div>
</div>

<div style="margin-top: 20px;margin-bottom: -5px">
<div style="margin-top: 20px">
<p>
Additionally, the Tooltip's <code>md-delay</code> attribute can use to delay the
show animation. The default values is 0 mSecs...
The Tooltip's <code>md-delay</code> attribute can be used to delay
the show animation.<br />
<strong>Note:</strong> the delay default value is
<strong>0 milliseconds</strong>.
</p>
<div style="padding-left: 37px">
<md-input-container>
<label>Tooltip Delay (for Photos)</label>
<input ng-model="demo.delayTooltip">
</md-input-container>

<md-button class="md-fab" aria-label="Photos with Tooltip Delay" style="margin-top: -24px;">
<md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px; "></md-icon>
<div layout="row" layout-align="space-between center">
<div style="padding-left: 30px">
<md-input-container>
<label>Tooltip Delay</label>
<input ng-model="demo.delayTooltip" />
</md-input-container>
</div>
<md-button
class="md-fab"
aria-label="Menu with Tooltip Delay"
style="margin-top: -24px">
<md-tooltip md-delay="demo.delayTooltip">
Photos with Tooltip Delay {{demo.delayTooltip}} msecs
Menu with Tooltip Delay {{demo.delayTooltip}} msecs
</md-tooltip>
<md-icon md-svg-src="img/icons/ic_more_vert_24px.svg"></md-icon>
</md-button>

</div>
</div>

</div>
</md-content>

</div>
20 changes: 8 additions & 12 deletions src/components/tooltip/demoBasicUsage/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,14 @@
angular.module('tooltipDemo1', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
angular.module('tooltipDemo', ['ngMaterial'])
.controller('AppCtrl', AppCtrl);

function AppCtrl($scope) {
$scope.demo = {
showTooltip : false,
tipDirection : ''
showTooltip: false,
tipDirection: 'bottom'
};

$scope.demo.delayTooltip = undefined;
$scope.$watch('demo.delayTooltip',function(val) {
$scope.$watch('demo.delayTooltip', function(val) {
$scope.demo.delayTooltip = parseInt(val, 10) || 0;
});

$scope.$watch('demo.tipDirection',function(val) {
if (val && val.length ) {
$scope.demo.showTooltip = true;
}
});
});
}
8 changes: 0 additions & 8 deletions src/components/tooltip/demoBasicUsage/style.css
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions src/components/tooltip/tooltip-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
md-tooltip.md-THEME_NAME-theme {
.md-tooltip.md-THEME_NAME-theme {
color: '{{background-700-contrast}}';
.md-content {
&.md-panel {
background-color: '{{background-700}}';
}
}
Loading