@Angular/Material Tooltip global "mdTooltipShowDelay"

Question

I'm using the MdTooltipModule in my Angular4 Project to show tooltips to the user. I include the tooltip like so:

   <a *ngFor="let option of optionsToggle"
       mdTooltip="{{option.name | translate}}"
       mdTooltipShowDelay="1000"
       mdTooltipPosition="left">
      <i class="material-icons">{{option.icon}}</i>
    </a>

Although this works fine, I would like to globally set the showDelay just once for my whole project, and don't repeat this all the time. Is there any easy way to achieve this? I guess using the binding [mdTooltipShowDelay]="value" could help, but this won't access static variables and I don't want to initalize it in every component.

Answer 1

From Angular Material v5.1.0, is implemented MAT_TOOLTIP_DEFAULT_OPTIONS injection token, that can be used to override the default options for matTooltip.

const MAT_TOOLTIP_DEFAULT_OPTIONS: InjectionToken<MatTooltipDefaultOptions>;

In Angular Material v8, MatTooltipDefaultOptions has the following structure, as described here:

export interface MatTooltipDefaultOptions {
  showDelay: number;
  hideDelay: number;
  touchendHideDelay: number;
  position?: TooltipPosition;
}

The defaults for these values are, as found here:

{
  showDelay: 0,
  hideDelay: 0,
  touchendHideDelay: 1500,
}

---

A simple implementation would be:

...
import {MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipDefaultOptions} from '@angular/material';

export const myCustomTooltipDefaults: MatTooltipDefaultOptions = {
  showDelay: 1000,
  hideDelay: 500,
  touchendHideDelay: 1000,
};

@NgModule({
    imports: [...],
    providers: [
        {provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: myCustomTooltipDefaults}
    ],
})

Demo on Stacklitz.

---

Alternatively, we can inject the default options on component level. Following this approach, we can have multiple components with different defaults. We can have a component with:

export const fooCustomTooltipDefaults: MatTooltipDefaultOptions = {
  showDelay: 1000,
  hideDelay: 500,
  touchendHideDelay: 1000,
};
@Component({
     selector: 'foo',
     templateUrl: './foo.component.html',
     providers: [
       {provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: fooCustomTooltipDefaults}
     ],
})

And another component:

export const barCustomTooltipDefaults: MatTooltipDefaultOptions = {
  showDelay: 2000,
  hideDelay: 0,
  touchendHideDelay: 1000,
};

@Component({
     selector: 'bar',
     templateUrl: './bar.component.html',
     providers: [
       {provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: barCustomTooltipDefaults}
     ],
})

Demo on Stackblitz.

---

Angular Material documentation: https://material.angular.io/components/tooltip/api#MAT_TOOLTIP_DEFAULT_OPTIONS