Video Tutorials

Policy

Twitter LogoFacebook Logo
Tooltip
Hello, in this tutorial, I will be talking about the Angular Material Tooltip component.
By: King

A tooltip is a small message that appears next to an element above, below, on the left, or on the right. 

We can set how fast for it to appear or how long for it to disappear when we move away. It can be toggled by an event or by moving the mouse cursor over the element.

Implementation

To begin, add the MatTooltipModule to the app. Go to the app module file, add the import statement, and add it to the app.

import { MatTooltipModule } from '@angular/material/tooltip';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...,
    MatTooltipModule
  ],
  ...
})
export class AppModule { 

}

Adding the Tooltip

Go to an HTML page and locate the element that you want to apply the tooltip to. 


To add the tooltip, apply matTooltip directive and then give it a value.

<button matTooltip="myMessage">
   Tooltip Example
</button>

If your tooltip requires you to change based on certain events, you should use a variable instead. Wrap the tooltip directive in brackets. Then replace the string value with the variable.

<button [matTooltip]="myMessage">
   Tooltip Example
</button>

Repositioning the tooltip

To reposition the tooltip, apply the matTooltipPosition input and set it to either above, below, left, or right.

<button [matTooltip]="myMessage"
    matTooltipPosition="above">

   Tooltip Example

</button>

Changing the duration

To change how fast you want the tooltip to appear, apply the matTooltipShowDelay input and pass in the amount of time in milliseconds.  

<button [matTooltip]="myMessage"
    matTooltipShowDelay="2000">
   Tooltip Example
</button>

To set how fast you want the tooltip to go away, apply the matTooltipHideDelay input and pas in the amount of time in milliseconds as well. 

<button [matTooltip]="myMessage"
    matTooltipShowDelay="2000"
    matTooltipHideDelay="1000">
   Tooltip Example
</button>

Toggling the Tooltip Manually

Instead of toggling the tooltip using the mouse cursor, we can toggle it with an event.

Locate the element with the matTooltip directive. Remove the matTooltip show and hide delay inputs and give it a template reference id then pass in matTooltip. 

<button [matTooltip]="myMessage"
   #tempRef="matTooltip">
   Tooltip Example
</button>

Add a button element and attach a click event to it. 

Instead of passing in a custom function, grab the tooltip element reference id and then call the toggle() function. This will toggle the tooltip on and off when the button is clicked on.

<button (click)="tempRef.toggle()">Toggle</button>

Instead of using a single button to toggle the tooltip, we can divide the task into 2 separate actions.

<button (click)="tempRef.show()">Show</button>

<button (click)="tempRef.hide()">Hide</button>

The show() function will make the tooltip appear and the hide() function will make it disappear.


Sign In