src/app/materials/tooltips/tooltips.component.ts
| selector | app-tooltips |
| styleUrls | ./tooltips.component.scss |
| templateUrl | ./tooltips.component.html |
Methods |
constructor()
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-tooltips',
templateUrl: './tooltips.component.html',
styleUrls: ['./tooltips.component.scss']
})
export class TooltipsComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
<mat-card>
<mat-card-title>Basic tooltip</mat-card-title>
<mat-card-content>
<button mat-raised-button matTooltip="Info about the action">
Action
</button>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-title> Tooltip with a custom position </mat-card-title>
<mat-card-content>
<button mat-raised-button matTooltip="Info about the action" matTooltipPosition="after">
Action
</button>
<br/>
<button mat-raised-button matTooltip="Info about the action" matTooltipPosition="before">
Action
</button>
<br/>
<button mat-raised-button matTooltip="Info about the action" matTooltipPosition="above">
Action
</button>
<br/>
<button mat-raised-button matTooltip="Info about the action" matTooltipPosition="below">
Action
</button>
<br/>
<button mat-raised-button matTooltip="Info about the action" matTooltipPosition="left">
Action
</button>
<br/>
<button mat-raised-button matTooltip="Info about the action" matTooltipPosition="right">
Action
</button>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-title>Tooltip with a show and hide delay</mat-card-title>
<mat-card-content>
<button mat-raised-button matTooltip="Info about the action" matTooltipShowDelay="1000" matTooltipHideDelay="2000">
Action
</button>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-title>Tooltip with a show and hide delay</mat-card-title>
<mat-card-content>
<button mat-raised-button matTooltip="Info about the action">
Action
</button>
</mat-card-content>
</mat-card>
./tooltips.component.scss
mat-card {
margin: 24px;
}