Angular Material 13 Tooltip with Dynamic Positions Tutorial

Angular Material 13 Tooltip component example. Tooltip is a small but essential user interface element; it shows the significant brief information associated with the icon or element on which you hover over.

Tooltip is great for displaying informative messages in UI layouts. If you do not know how to create a tooltip in the angular app, then this quick guide is for you.

In this step-by-step tutorial, we will describe how to eloquently add a tooltip UI component in the Angular 13 application using the Angular material UI library.

If you don’t know what Angular Material is?

It is a powerful and eloquent UI component library for the Angular framework.

Angular Material design components assist in making stunning, uniform, and practical web applications while sticking to the latest modern web design principles like browser compatibility, device autonomy, and agile degradation.

How to Implement Angular Material Tooltip in Angular 13 Application

  • Step 1: Set Up Angular Project
  • Step 2: Install Angular Material Module
  • Step 3: Set Up Material Tooltip Module
  • Step 4: Integrate Tooltip in Component
  • Step 5: Adjust Tooltip Positions
  • Step 6: Serve Angular App

Set Up Angular Project

To begin with the development, make sure to install Node, Npm and Angular CLI services in your system.

npm install -g @angular/cli

You can now use the angular CLI to install a new angular application.

ng new ng-material-demo

Just, get into the app directory using given command:

cd ng-material-demo

Disable Strict Angular TypeStrict Errors

The latest version of Angular comes with strict mode, therefore, you need to update the compilerOptions and angularCompilerOptions in tsconfig.json file for disabling the strict mode:

{
   “strict”: false, 
   "noImplicitReturns": false 
   "strictTemplates": false
}

Install Angular Material Module

To install the material library in the angular app, you have to run the given command:

ng add @angular/material

Choose the suggested options on your terminal:

  1. Choose a prebuilt theme name or “custom” for a custom theme:

    You can choose from prebuilt material design themes or set up an extensible custom theme.

  2. Set up global Angular Material typography styles:

    Whether to apply the global typography styles to your application.

  3. Set up browser animations for Angular Material:

    Importing the BrowserAnimationsModule into your application enables Angular’s animation system. Declining this will disable most of Angular Material’s animations.

Afterward, define the prebuilt theme’s CSS in src/styles.scss file:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Set Up Material Tooltip Module

We have to import MatTooltipModule module in main app module class. When you build app with angular material, that time you might need more than one material module for that we are creating a pivot file in angular’s root.

Create a new file and name it src/material.module.ts and put the given code into it.

import { NgModule } from '@angular/core';
import { A11yModule } from '@angular/cdk/a11y';
import { CdkAccordionModule } from '@angular/cdk/accordion';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { PortalModule } from '@angular/cdk/portal';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';
import { OverlayModule } from '@angular/cdk/overlay';

@NgModule({
  exports: [
    A11yModule,
    CdkAccordionModule,
    ClipboardModule,
    CdkStepperModule,
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    OverlayModule,
    PortalModule,
    ScrollingModule,
  ],
})

export class MaterialModule {}

Next, you need insert following code in app/app.module.ts file.

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

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '../material.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

export class AppModule {}

In this file we imported CUSTOM_ELEMENTS_SCHEMA, FormsModule, ReactiveFormsModule and MaterialModule modules from their respective library.

Integrate Tooltip in Component

In this step, we will add simple angular material tooltip in Angular, hence open the app.component.ts file.

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { TooltipPosition } from '@angular/material/tooltip';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

export class AppComponent {
  positionOptions: TooltipPosition[] = ['above'];
  position = new FormControl(this.positionOptions[0]);
}

Now, insert the following code in app.component.html file.

<mat-form-field appearance="fill">
  <mat-label>Angular Material Simple Tooltip Example</mat-label>
  <mat-select [formControl]="position">
    <mat-option
      *ngFor="let positionOption of positionOptions"
      [value]="positionOption"
    >
      {{ positionOption }}
    </mat-option>
  </mat-select>
</mat-form-field>

<div class="container" cdkScrollable>
  <button
    mat-raised-button
    #tooltip="matTooltip"
    matTooltip="Action details"
    [matTooltipPosition]="position.value"
    matTooltipHideDelay="100000"
    aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue sollicitudin pulvinar."
    class="example-button"
  >
    Show Tooltip
  </button>
</div>

Adjust Tooltip Positions

Previously, we integrated a tooltip with above position, you can also pass left, right, and bottom positions in app.component.ts file.

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { TooltipPosition } from '@angular/material/tooltip';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

export class AppComponent {
  positionOptions: TooltipPosition[] = ['above', 'below', 'left', 'right'];
  position = new FormControl(this.positionOptions[0]);
}

Serve Angular App

Run the angular application with the help of the given below command.

ng serve

It will start the angular’s development server and open the app on the browser with given url:

http://localhost:4200

Angular Material Tooltip with Default Options Tutorial

Conclusion

We have completed the task; we are sure adding angular material tooltip with ready-made options is very easy in Angular. Angular material offers ease in creating tooltip component in Angular.

We are sure if you are a front-end developer, you will love these features.