Angular Material Tooltip

Let's talk about tooltips in angular material basically angular material tooltip provides a text label that is displayed when the user hovers over or longpresses an element.

So to get started we need to import the module in our material.module.ts and add it to the MaterialComponents[] array.

import { MatTooltipModule } from "@angular/material";

const MaterialComponents = [
  MatTooltipModule,
]

Next in the HTML let's create a simple button and then associate a tooltip with that button, to do that we need to add matTooltip="Welcome to HoshCoding.com" as attribute.

<button mat-raised-button matTooltip="Welcome to HoshCoding.com">Hello</button>

If I save the file and take a look at the browser you can see that when I hover on the button we get the tooltip that says "Welcome to HoshCoding.com" and by default the position of the tooltip is the bottom of the element that is bellow the element let's see how to control the position of a tooltip.

Angular Material Tooltip Control Positions

To control the position of a tooltip we use the attribute matTooltipPosition which accept 'after', 'before', 'above', 'below', 'left', 'right' as values, let's see how it should looks if we change those values.

Tooltip after

<button
  mat-raised-button
  matTooltip="HoshCoding.com"
  matTooltipPosition="after"
>
  Hello
</button>

Tooltip before

as you may I added some left margin so that the button is not sticked to the left of the page that how you can see easily the tooltip before the button element.

<button
  style="margin-left: 50%"
  mat-raised-button
  matTooltip="HoshCoding.com"
  matTooltipPosition="before"
>
  Hello
</button>

Tooltip above

I added a top margin to push the button element to the bottom a little so that the tooltip can float to the top of the button element.

<button
  style="margin-top: 10em"
  mat-raised-button
  matTooltip="HoshCoding.com"
  matTooltipPosition="above"
>
  Hello
</button>

Tooltip below

<button
  mat-raised-button
  matTooltip="HoshCoding.com"
  matTooltipPosition="below"
>
  Hello
</button>

Tooltip left

Also here to create a room for the tooltip to be shown we added some left margin.

<button
  style="margin-left: 10em"
  mat-raised-button
  matTooltip="HoshCoding.com"
  matTooltipPosition="left"
>
  Hello
</button>

You may notice the it behaves just like the before postion.

Tooltip right

<button
  mat-raised-button
  matTooltip="HoshCoding.com"
  matTooltipPosition="right"
>
  Hello
</button>

You may notice the it behaves just like the after postion.

Angular Material Tooltip Delay

Sometimes the user might be just moving their mouse around and you don't want to the tooltip to pop up immediately, so adding a delay really helps in those situations we make use of matTooltipShowDelay and matTooltipHideDelay attributes let's add 2 seconds delay.

<button
  mat-raised-button
  matTooltip="HoshCoding.com"
  matTooltipPosition="right"
  matTooltipShowDelay="2000"
  matTootipHideDelay="2000"
>
  Hello
</button>

If you save the file and take a look at the browser there should be a delay in show and hide of the tooltip so when you hover on the button the tooltip will be shown after 2 seconds and when you move your mouse away it's gonna take 2 seconds to hide the tooltip. But you might not need a high delay but again it completely depends on your requirement.

That's about angular material tooltips if you want more details consider to visit the official documentation.