How to use Angular Material tooltip in Angular 12?

An Angular material is an amazing UI for Angular framework, it has lots of pre-built components like card, modal, more, and Angular material expansion panel or Angular material tooltip is one of them.

In this tutorial, first will learn how to use material tooltip component and second we’ll demonstrate we example of it with different material design tooltip attribute and lastly will customize CSS style on tooltip. Let’s get started.

Setting up and configuring Angular material tooltip

Let first demonstrate the Angular material design tooltip example here we had listed the abstract step of adding the Angular material design tooltip.

  • Step 1: Create Angular tooltip project
  • Step 2: Add Angular material library to our Angular project.
  • Step 3: Import MatTooltipModule to our project.
  • Step 4: Add matTooltip directive to create tooltip in component template
angular material tooltip

What is Angular material tooltip

Angular material design tooltip is small pop-up text information or message that appears when the user moves the mouse pointer over an element like an image, button, anchor tag, and div, etc. Angular material design tooltip provides a text label that is displayed when the user hovers over or long presses an element.

Setting up and configure material tooltip project

Let first create our Angular material design tooltip project. In our previous articles, we had articles on how to install and the best approach of configuring Angular material in our project. Run the following command to create and add Angular Material to our project.

ng new matTooltipApp
cd matTooltipApp
ng add @angular/material
Angular material tooltip example

While running the 3rd command will ask you the select theme, material typography, and animation, press yes on all. To use the Angular material design tooltip component, we have to import it into the app.module.ts file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatTooltipModule } from '@angular/material/tooltip';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatInputModule,
    MatButtonModule,
    MatSelectModule,
    MatTooltipModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

We need to add the Angular material button to demonstrate the material tooltip directive.

Angular material tooltip example

We have completed our configure of material tooltip project. Now let demonstrate an example of a material design tooltip on the button, anchor tag, and paragraph element.

angular material tooltip

Let edit the app.component.html template to add a material tooltip example.

<section>
  <span>
   <a mat-raised-button matTooltip matTooltip="Tooltip Display"  
     aria-label="Displays a tooltip">
        Tooltip on anchor tag
   </a>
  </span>

  <span>
   <button mat-raised-button matTooltip="Tooltip Display" 
     aria-label="Displays a tooltip">
      Tooltip on Button element
   </button>
 </span>

 <span>
  <p matTooltip="Tooltip Display" aria-label="Displays a tooltip">
     Tooltip on paragraph tag
  </p>
 </span>
</section>

Angular material tooltip attribute

We can control and configure material design tooltip position, delay, style, and more. Here we have listed the material design attributes of this library.

Attribute nameDescription
matToolTipThis attribute we assign what text information we want to popup.
matTooltipPositionThe position of the tooltip. It can have values after, before, above, below, right, and left. By default, the position value is below.
matTooltipShowDelayThe delay in milliseconds before showing the tooltip.
matTooltipHideDelayThe delay in milliseconds before closing the tooltip.
matTooltipClassWe can add the CSS class name on this attribute to customize the tooltip design.

Material tooltip postion

We have discussed that matTooltipPosition attribute to position material tooltip. We can use this attribute to dynamically change the direction of the tooltip. By default value of the position is below and we can assign the following values on matTooltipPostion.

  • left
  • right
  • after
  • before
  • above
  • below
Material tooltip position
<button mat-raised-button color="accent" matTooltip="Tooltip after" matTooltipPosition="after">
   Tooltip position after
</button>

<button mat-raised-button color="accent" matTooltip="Tooltip before" matTooltipPosition="before">
    Tooltip position before
</button>

<button mat-raised-button color="accent" matTooltip="Tooltip above" matTooltipPosition="above">
    Tooltip position above
</button>

<button mat-raised-button color="accent" matTooltip="Tooltip below" matTooltipPosition="below">
    Tooltip position below
</button>

<button mat-raised-button color="accent" matTooltip="Tooltip left" matTooltipPosition="left">
    Tooltip position left
 </button>

 <button mat-raised-button color="accent" matTooltip="Tooltip right" matTooltipPosition="right">
    Tooltip position right
 </button>

Mterial tooltip CSS style customization

We can use the matTooltipClass attribute to add customized class names on the tooltip so that we can style material design tooltip. Here is a screenshot of our Material tooltip CSS style.

Angular material tooltip CSS
<button mat-raised-button matTooltip="Adding a class to the tooltip container" matTooltipClass="tooltip">
      Angular material tooltip CSS
</button>

Once we have added the CSS class name on the matToolTip attribute, we can now customize the tooltip style in style.css or style.scss file.

.tooltip {
    font-size: 11px;
    color: red !important;
    background-color:yellow;
    border: 1px solid black;
}

Conclusion
We have completed our material tooltip directive with a few examples. I hope you have got some idea on how to use the matToolTip directive in Angular.

Related Post

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top