Tooltip Display Using Angular Material

In My last article i discussed on how to open Dialog Modal in our application using angular material. In these article I discuss on How to display Tooltip using Angular material.
First we need to import “MatTooltipModule” in app.module.ts file.


.................
//we need to import first MatTooltipModule From Material.
import {MatTooltipModule} from '@angular/material/dialog';
...................
@NgModule({
  .........
  imports: [
                MatTooltipModule,
            ...
           ]
})
export class AppModule(){}



After importing code we can use “MatTooltip” in any component.

Full code for Tooltip

Basic Example


<button mat-raised-button
        matTooltip="Tooltip Display"
        aria-label="displays a tooltip">
  Action
</button>


import {Component} from '@angular/core';

@Component({
  selector: 'basictooltip',
  templateUrl: 'basictooltip.html',
})
export class BasicTooltip {}


Tooltip Positioning
Tooltip display below elements default but we can configured using “matTooltipPosition” input.Below is the position value we can use.

Position Description
left It display on the left of the element
right It display on the right of the element
above It display above the element
below It display below the element
before It Display to the left in left-to-right layout and for right in right-to-left layout
after It Display to the right in left-to-right layout and for left in right-to-left layout



Mainly tooltip will be immediately shown when the user’s mouse hovers over the tooltip’s trigger element and immediately hides when the user’s mouse leaves.we can control on show & hide using “matTooltipShowDelay” & “matTooltipHideDelay” input add delay time in milliseconds.


<button mat-raised-button
        matTooltip="Tooltip Display"
matTooltipShowDelay="1000"
matTooltipHideDelay="2000"
        aria-label="displays a tooltip">
  Action
</button>


import {Component} from '@angular/core';

@Component({
  selector: 'basictooltip',
  templateUrl: 'basictooltip.html',
})
export class BasicTooltip {}

Spread the love
  • 38
  •  
  •  
  •  
  • 5
  •  
  •  
  •  
  •