Angular Material Tooltip

Updated March 29, 2023

Definition of Angular Material Tooltip

It provides the label of text which was used to display when the user will long press any element. It displays the element and the same is configured by using matTooltipPosition input. Basically, the tooltip is used to display the let, right, below and above element, by default tooltip position is below, but we can change the same by using a specified position in AngularJS.

What is angular material tooltip?

We need to use the MatTooltip directive in our project, this directive is used to attach the tooltip of the design tooltip for the element of the host. For adding tooltips into the angular material we can also use the material tooltip module name as MatTooltipModule. The selector of MatTooltip is used to display the tooltip when the user hovers an element. As we know that angular material is a component library of UI and it contains the number of material components using the same we can build our application. It is very useful and important in AngularJS.

Angular material tooltip configuring project

• The below steps show how to configure the project. To configure the project we need to install angular material CLI in our system. The below example shows that to install angular material CLI.
• To configure we need to install the Angular CLI in our system. We can install the angular CLI by using the npm command.

npm install -g @angular/cli

• After installing the Angular CLI in this step we are creating the workspace for our angular project. We are creating a workspace name angular-material-tooltip. The below example shows to create the workspace of our angular project are as follows. We are adding angular routing this option will pop up at the time of creating a workspace. Also, we are selecting the stylesheet format as CSS.

ng new angular-material-tooltip

• After creating the workspace of the project in this step we are installing the angular CDK, angular animations and angular material are as follows.

npm install @angular/material –save

• After installing angular material, cdk, and animation in this step we are adding the same in our project are as follows. The below example shows add the angular material library as follows.

cd angular-material-tooltip/

ng add @angular/material

How to use angular material tooltip?

• We need to install AngularJS in our system, we have already installed the same so we have no need to install it again.
• It is used when we want to display specific information when the user will hover the button.
• We need to follow the below approach is as follows.
• First, we need to install the angular material by using the ng add command. By using this command we are installing the specified toolkit in AngularJS.
• After installing the angular material we need to import the mat tooltip module in our project. We are importing this module by using the app.module.ts file.
• After importing the module we need to use the mat tooltip property for displaying the text which we are rendering.
• After displaying the property of the text, if suppose we want to change the position we need to property of angular material name as matTooltipPosition.
• We can customize the position of the tooltip. After implementing all these steps we can start working on the actual implementation of the project.
• In this step, we are implementing the app.module.ts file. This file contains the module which was we are loading into our project. In this example we are loading the browse module, forms module, app component, browse animation module, mat tooltip module, and mat button module as follows.

Code –

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

……………….

@NgModule({

imports: [

BrowserModule,

FormsModule,

MatButtonModule,

MatTooltipModule,

BrowserAnimationsModule

],

declarations: [ AppComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

• Now we are implementing the html file of the app component. In the below example, we can see that we have created the app.component.html file. We have defined the button and br tag while creating this file.

Code –

<button mat-raised-button MatTooltip =
"Dispaly info."
matTooltipPosition = "below">
show info.
</button>
<br> <br> <br> <br> <br>
<button mat-raised-button matTooltip =
"display info on right."
matTooltipPosition = "right">
Show info.
</button>

How to Disable/ Enable tooltip?

• Angular material design tooltip is nothing but the pop up text information or message which was appears when user is moving the mouse pointer in an element.
• Basically, it provides the label of text which was displayed when the user will hover over an element.

We are using the below attribute while enabling and disabling.

• md-visible – This is used to determine tooltip is visible or not.
• md-delay – This is used to show how many milliseconds we need to wait to show the tooltip.
• md-autohide – This attribute is provided by using a boolean value. By using this attribute we can hide the text after leaving the mouse cursor.
• md-direction – This attribute is used to determine in which direction our angular material tooltip will go.
• The below example shows how we can disable the tooltip in our project as follows. We are using matTooltipDisabled attribute.

Code –

<button mat-raised-button
matTooltip="Disable the tooltip"
matTooltipDisabled="true">
Angular material tooltip disabled.
</button>
<button mat-raised-button
matTooltip = "Disable the tooltip"
[matTooltipDisabled] = "isDisabled">
Angular material tooltip disabled.
</button>

• By default it is enabled in our program we can use by using the following code are as follows. In the below example, we can see that we have enabled by using the attribute name as matTooltip.

Code –

<button mat-raised-button
matTooltip = "Angular material tooltip">
Angular material tooltip
</button>

Conclusion

We need to use MatTooltip directive in our project, this directive is used to attach the tooltip of the design tooltip for the element of the host. It provides the label of text which was used to display when the user will long-press any element.

Recommended Article

This is a guide to Angular Material Tooltip. Here we discuss the Definition, What is an angular material tooltip, and examples with code implementation respectively. You may also have a look at the following articles to learn more –

1. Angular Material Grid
2. Angular material slider
3. Angular Material Overlay
4. Angular material radio button