angular-material-app documentation
  1. Components
  2. TooltipsComponent

File

src/app/materials/tooltips/tooltips.component.ts

Implements

OnInit

Metadata

selector app-tooltips
styleUrls ./tooltips.component.scss
templateUrl ./tooltips.component.html

Index

Methods

Constructor

constructor()
Defined in src/app/materials/tooltips/tooltips.component.ts:8

Methods

ngOnInit
ngOnInit()
Defined in src/app/materials/tooltips/tooltips.component.ts:12
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() {
  }

}
Copy
<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>
Copy

./tooltips.component.scss 

mat-card {
  margin: 24px;
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""