Skip to content

Commit 68f2890

Browse files
andrewseguinjelbourn
andrewseguin
authored and
jelbourn
committed
chore(tooltip): improve examples; use on demo app (#11272)
1 parent 96d5550 commit 68f2890

26 files changed

+229
-142
lines changed

‎src/demo-app/tooltip/tooltip-demo.html

Lines changed: 1 addition & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1 @@
1-
<button *ngFor="let tooltip of tooltips" matTooltip="Tooltip message">Tooltip Button</button>
2-
<button (click)="tooltips.push('')">Add tooltip</button>
3-
<button (click)="tooltips.shift()" [disabled]="tooltips.length === 0">Remove tooltip</button>
4-
5-
<div class="demo-tooltip">
6-
<h1>Tooltip Demo</h1>
7-
8-
<div class="demo-tooltip-centered" cdk-scrollable>
9-
<button #tooltip="matTooltip"
10-
mat-raised-button
11-
color="primary"
12-
[matTooltip]="message"
13-
[matTooltipPosition]="position"
14-
[matTooltipDisabled]="disabled"
15-
[matTooltipShowDelay]="showDelay"
16-
[matTooltipHideDelay]="hideDelay"
17-
[matTooltipClass]="{'demo-red-tooltip': showExtraClass}">
18-
Mouse over to see the tooltip
19-
</button>
20-
<div>Scroll down while tooltip is open to see it hide automatically</div>
21-
<div style="height: 400px;"></div>
22-
</div>
23-
24-
<p>
25-
<mat-radio-group [(ngModel)]="position">
26-
<mat-radio-button value="below">Below</mat-radio-button>
27-
<mat-radio-button value="above">Above</mat-radio-button>
28-
<mat-radio-button value="left">Left</mat-radio-button>
29-
<mat-radio-button value="right">Right</mat-radio-button>
30-
<mat-radio-button value="before">Before</mat-radio-button>
31-
<mat-radio-button value="after">After</mat-radio-button>
32-
</mat-radio-group>
33-
</p>
34-
<p>
35-
<strong>Message: </strong>
36-
<mat-form-field><input matInput [(ngModel)]="message"></mat-form-field>
37-
</p>
38-
39-
<p>
40-
<strong>Disabled: </strong>
41-
<mat-checkbox [(ngModel)]="disabled"></mat-checkbox>
42-
</p>
43-
44-
<p>
45-
<strong>Show Delay (ms): </strong>
46-
<mat-form-field>
47-
<input matInput type="number" [(ngModel)]="showDelay">
48-
</mat-form-field>
49-
</p>
50-
51-
<p>
52-
<strong>Hide Delay (ms): </strong>
53-
<mat-form-field>
54-
<input matInput type="number" [(ngModel)]="hideDelay">
55-
</mat-form-field>
56-
</p>
57-
58-
<strong>Mouse over to</strong>
59-
<button mat-raised-button color="primary" (mouseenter)="tooltip.show()">
60-
Show tooltip
61-
</button>
62-
<button mat-raised-button color="primary" (mouseenter)="tooltip.hide()">
63-
Hide tooltip
64-
</button>
65-
<button mat-raised-button color="primary" (mouseenter)="tooltip.toggle()">
66-
Toggle tooltip
67-
</button>
68-
<button mat-raised-button color="primary" (mouseenter)="showExtraClass = !showExtraClass">
69-
Toggle tooltipClass
70-
</button>
71-
</div>
1+
<material-example-list [ids]="examples" expandAll></material-example-list>

‎src/demo-app/tooltip/tooltip-demo.scss

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎src/demo-app/tooltip/tooltip-demo.ts

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,23 @@
55
* Use of this source code is governed by an MIT-style license that can be
66
* found in the LICENSE file at https://angular.io/license
77
*/
8-
98
import {Component} from '@angular/core';
10-
import {TooltipPosition} from '@angular/material';
11-
129

1310
@Component({
1411
moduleId: module.id,
1512
selector: 'tooltip-demo',
1613
templateUrl: 'tooltip-demo.html',
17-
styleUrls: ['tooltip-demo.css'],
1814
})
1915
export class TooltipDemo {
20-
position: TooltipPosition = 'after';
21-
message = 'Here is the tooltip';
22-
tooltips: string[] = [];
23-
disabled = false;
24-
showDelay = 0;
25-
hideDelay = 0;
26-
showExtraClass = false;
16+
examples = [
17+
'tooltip-overview',
18+
'tooltip-position',
19+
'tooltip-disabled',
20+
'tooltip-message',
21+
'tooltip-delay',
22+
'tooltip-manual',
23+
'tooltip-modified-defaults',
24+
'tooltip-auto-hide',
25+
'tooltip-custom-class',
26+
];
2727
}

‎src/material-examples/material-module.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {NgModule} from '@angular/core';
22

3+
import {ScrollDispatchModule} from '@angular/cdk/scrolling';
34
import {CdkTableModule} from '@angular/cdk/table';
45
import {CdkTreeModule} from '@angular/cdk/tree';
56
import {
@@ -50,7 +51,8 @@ import {
5051
MatTabsModule,
5152
MatToolbarModule,
5253
MatTooltipModule,
53-
MatTreeModule
54+
MatTreeModule,
55+
ScrollDispatchModule,
5456
],
5557
exports: [
5658
CdkTableModule,
@@ -89,7 +91,8 @@ import {
8991
MatTabsModule,
9092
MatToolbarModule,
9193
MatTooltipModule,
92-
MatTreeModule
94+
MatTreeModule,
95+
ScrollDispatchModule,
9396
]
9497
})
9598
export class ExampleMaterialModule {}

‎src/material-examples/tooltip-auto-hide/tooltip-auto-hide-example.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.example-button {
2+
display: block;
3+
width: 48px;
4+
margin: 80px auto 400px;
5+
}
6+
7+
.example-container {
8+
height: 200px;
9+
overflow: auto;
10+
border: 1px solid #ccc;
11+
}

‎src/material-examples/tooltip-auto-hide/tooltip-auto-hide-example.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<mat-form-field>
2+
<mat-select placeholder="Tooltip position" [formControl]="position">
3+
<mat-option *ngFor="let positionOption of positionOptions" [value]="positionOption">
4+
{{positionOption}}
5+
</mat-option>
6+
</mat-select>
7+
</mat-form-field>
8+
9+
<div class="example-container" cdk-scrollable>
10+
<button mat-raised-button #tooltip="matTooltip"
11+
matTooltip="Info about the action"
12+
[matTooltipPosition]="position.value"
13+
matTooltipHideDelay="100000"
14+
aria-label="Button that displays a tooltip that hides when scrolled out of the container"
15+
class="example-button">
16+
Action
17+
</button>
18+
</div>

‎src/material-examples/tooltip-auto-hide/tooltip-auto-hide-example.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import {Component} from '@angular/core';
2+
import {FormControl} from '@angular/forms';
3+
import {TooltipPosition} from '@angular/material';
4+
5+
/**
6+
* @title Tooltip that demonstrates auto-hiding when it clips out of its scrolling container.
7+
*/
8+
@Component({
9+
selector: 'tooltip-auto-hide-example',
10+
templateUrl: 'tooltip-auto-hide-example.html',
11+
styleUrls: ['tooltip-auto-hide-example.css'],
12+
})
13+
export class TooltipAutoHideExample {
14+
positionOptions: TooltipPosition[] = ['below', 'above', 'left', 'right'];
15+
position = new FormControl(this.positionOptions[0]);
16+
}

‎src/material-examples/tooltip-custom-class/tooltip-custom-class-example.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.example-button {
2+
margin-top: 16px;
3+
}
4+
5+
.example-tooltip-red {
6+
background: #b71c1c;
7+
}

‎src/material-examples/tooltip-custom-class/tooltip-custom-class-example.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<button mat-raised-button
2+
matTooltip="Info about the action"
3+
matTooltipClass="example-tooltip-red"
4+
aria-label="Button that shows a red tooltip"
5+
class="example-button">
6+
Red-tooltip Action
7+
</button>

‎src/material-examples/tooltip-custom-class/tooltip-custom-class-example.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import {Component, ViewEncapsulation} from '@angular/core';
2+
3+
/**
4+
* @title Tooltip that can have a custom class applied.
5+
*/
6+
@Component({
7+
selector: 'tooltip-custom-class-example',
8+
templateUrl: 'tooltip-custom-class-example.html',
9+
styleUrls: ['tooltip-custom-class-example.css'],
10+
// Need to remove view encapsulation so that the custom tooltip style defined in
11+
// `tooltip-custom-class-example.css` will not be scoped to this component's view.
12+
encapsulation: ViewEncapsulation.None,
13+
})
14+
export class TooltipCustomClassExample { }

‎src/material-examples/tooltip-delay/tooltip-delay-example.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1-
button {
2-
margin: 8px;
1+
.example-user-input {
2+
display: block;
3+
width: 150px;
34
}

‎src/material-examples/tooltip-delay/tooltip-delay-example.html

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,21 @@
1-
<button mat-raised-button matTooltip="Tooltip!" matTooltipShowDelay="1000">
2-
My tooltip waits one second to show
3-
</button>
1+
<mat-form-field class="example-user-input">
2+
<input matInput placeholder="Show delay (milliseconds)"
3+
type="number"
4+
aria-label="Adds a delay between hovering over the button and displaying the tooltip"
5+
[formControl]="showDelay">
6+
</mat-form-field>
7+
8+
<mat-form-field class="example-user-input">
9+
<input matInput placeholder="Hide delay (milliseconds)"
10+
type="number"
11+
aria-label="Adds a delay between hovering away from the button and hiding the tooltip"
12+
[formControl]="hideDelay">
13+
</mat-form-field>
414

5-
<button mat-raised-button matTooltip="Tooltip!" matTooltipHideDelay="2000">
6-
My tooltip waits two seconds to hide
15+
<button mat-raised-button
16+
matTooltip="Info about the action"
17+
[matTooltipShowDelay]="showDelay.value"
18+
[matTooltipHideDelay]="hideDelay.value"
19+
aria-label="Button that displays a tooltip with a customized delay in showing and hiding">
20+
Action
721
</button>

‎src/material-examples/tooltip-delay/tooltip-delay-example.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {Component} from '@angular/core';
2+
import {FormControl} from '@angular/forms';
23

34
/**
45
* @title Tooltip with a show and hide delay
@@ -8,4 +9,7 @@ import {Component} from '@angular/core';
89
templateUrl: 'tooltip-delay-example.html',
910
styleUrls: ['tooltip-delay-example.css'],
1011
})
11-
export class TooltipDelayExample {}
12+
export class TooltipDelayExample {
13+
showDelay = new FormControl(1000);
14+
hideDelay = new FormControl(2000);
15+
}

‎src/material-examples/tooltip-disabled/tooltip-disabled-example.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.example-disabled-checkbox {
2+
margin-left: 8px;
3+
}

‎src/material-examples/tooltip-disabled/tooltip-disabled-example.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<button mat-raised-button
2+
matTooltip="Info about the action"
3+
[matTooltipDisabled]="disabled.value"
4+
aria-label="Button that displays a tooltip that can be programatically disabled">
5+
Action
6+
</button>
7+
8+
<mat-checkbox [formControl]="disabled" class="example-disabled-checkbox">
9+
Tooltip disabled
10+
</mat-checkbox>

‎src/material-examples/tooltip-disabled/tooltip-disabled-example.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import {Component} from '@angular/core';
2+
import {FormControl} from '@angular/forms';
3+
4+
/**
5+
* @title Tooltip that can be disabled
6+
*/
7+
@Component({
8+
selector: 'tooltip-disabled-example',
9+
templateUrl: 'tooltip-disabled-example.html',
10+
styleUrls: ['tooltip-disabled-example.css'],
11+
})
12+
export class TooltipDisabledExample {
13+
disabled = new FormControl(false);
14+
}

‎src/material-examples/tooltip-manual/tooltip-manual-example.css

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
/** No CSS for this example */
1+
.example-action-button {
2+
margin-top: 16px;
3+
}

‎src/material-examples/tooltip-manual/tooltip-manual-example.html

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,28 @@
1-
<button mat-raised-button (click)="tooltip.show()"> Show tooltip </button>
1+
<div>
2+
<span> Mouse over to </span>
3+
<button mat-button
4+
(mouseenter)="tooltip.show()"
5+
aria-label="Button that progamatically shows a tooltip on another button"
6+
class="example-action-button">
7+
show
8+
</button>
9+
<button mat-button
10+
(mouseenter)="tooltip.hide()"
11+
aria-label="Button that progamatically hides a tooltip on another button"
12+
class="example-action-button">
13+
hide
14+
</button>
15+
<button mat-button
16+
(mouseenter)="tooltip.toggle()"
17+
aria-label="Button that progamatically toggles a tooltip on another button to show/hide"
18+
class="example-action-button">
19+
toggle show/hide
20+
</button>
21+
</div>
222

3-
<span matTooltip="This is the tooltip message" #tooltip="matTooltip">
4-
I have a tooltip
5-
</span>
23+
<button mat-raised-button #tooltip="matTooltip"
24+
matTooltip="Info about the action"
25+
matTooltipPosition="right"
26+
aria-tooltip="Button that displays and hides a tooltip triggered by other buttons">
27+
Action
28+
</button>

‎src/material-examples/tooltip-message/tooltip-message-example.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.example-user-input {
2+
margin-right: 8px;
3+
}

‎src/material-examples/tooltip-message/tooltip-message-example.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<mat-form-field class="example-user-input">
2+
<input matInput placeholder="Tooltip message" [formControl]="message">
3+
</mat-form-field>
4+
5+
<button mat-raised-button
6+
[matTooltip]="message.value"
7+
aria-label="Button that displays a tooltip with a custom message">
8+
Action
9+
</button>

‎src/material-examples/tooltip-message/tooltip-message-example.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import {Component} from '@angular/core';
2+
import {FormControl} from '@angular/forms';
3+
4+
/**
5+
* @title Tooltip with a changing message
6+
*/
7+
@Component({
8+
selector: 'tooltip-message-example',
9+
templateUrl: 'tooltip-message-example.html',
10+
styleUrls: ['tooltip-message-example.css'],
11+
})
12+
export class TooltipMessageExample {
13+
message = new FormControl('Info about the action');
14+
}

‎src/material-examples/tooltip-modified-defaults/tooltip-modified-defaults-example.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1-
<button mat-raised-button matTooltip="By default, I delay">
1+
<button mat-raised-button
2+
matTooltip="By default, I delay"
3+
aria-label="Button that displays a tooltip that has custom delays through a default config">
24
Button with delay-default tooltip
35
</button>

‎src/material-examples/tooltip-overview/tooltip-overview-example.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
1-
<span matTooltip="Tooltip!">I have a tooltip</span>
1+
<button mat-raised-button
2+
matTooltip="Info about the action"
3+
aria-label="Button that displays a tooltip when focused or hovered over">
4+
Action
5+
</button>

0 commit comments

Comments
 (0)