Angular 8/7 | How to Add Tooltips using Angular Material components

The tooltip component is a piece of information shown to the user for actions. Tooltips prove very handy for developers to communicate with users with useful messages in the application. The best thing is developer doesn’t need to care about space as they are overlays floating above content.

Angular material provides a number of useful components which are very easy to use after configuration.

In this article, we will discuss How to add Angular Material Tooltip in the application. There is a number of parameters and options available for customizing tooltip behavior.

Let’s get started!

First, we will create a new Angular 8 project then install the material. If you already having a running project just jump to Tooltip installation steps.

Create a new Angular Project

We will start with a new Angular project, using Angular CLI tool is very easy and quick to start with a project. The current version of Angular CLI is  8.0.3


Add Angular Material in Project

To use Angular material, we need to install and configure an Angular project to use its components. let’s go through some quick steps to plug in.

Install packages

Run following NPM command to install @angular/material, @angular/material and @angular/material required as dependencies.

The version of material and dependencies should be at the same level, you can check the version of @angular/core in package.json if its something like 7.2.15 then install packages with @7 otherwise some console errors will creep in as shown below :\

Import BrowserAnimationsModule in Module

Angular Material is known for beautiful animations like ripple effects 😀 so just go to app’s main module file then import BrowserAnimationsModule then add in imports array.

Add Material Theme

Components used in the project are styles using CSS available in the material CSS theme file, so just add the following theme file link in styles.css available at the project root.

you can use any one of these available themes.

That’s it … we are done with Angular material configuration.

Add Tooltip in Project[ps2id id=’how-to-use-tooltip-in-project’ target=”/]

To use Tooltip component, open app.module.ts file import MatTooltipModule then add in imports array as shown below

Now we are ready to use tooltips anywhere in the project.

Basic Tooltip

To show tooltip on any element add matTooltip directive with text

Position of Tooltip

matTooltipPosition is used to position tooltip. Available options are

‘after’, ‘before’, ‘above’, ‘below’, ‘left’, ‘right’

Custom Style

Tooltip style can be changed by adding a custom class using matTooltipClass


Delay to show/ hide the tooltip

Custom delay can be added to show/ hide tooltip using matTooltipShowDelay & matTooltipHideDelay

Disable/ Enable tooltip

matTooltipDisabled takes boolean value to enable disable tooltip

Manually Show/ Hide/ Toggle tooltip

To manually control tooltip programmatically we can call show(), hide() or toggle() method by using #template variable. Using template variable tooltips can be controlled from the component as well.

Angular material tooltips are very easy to implement and configure as per needs. These can be used to make the application more directed and user-friendly.

Leave a Reply

Notify of