Search code examples
angularmobileangular-material

Disable Mat-Tooltip globally for mobile devices

I'm developing an Angular application using Angular Material, and I'm encountering an issue with the mat-tooltip component. Specifically, I need to globally disable tooltips for touch events on mobile devices while keeping them active for hover events on desktops.

I've tried configuring this behavior globally using the following approach as recommended in the Angular Material documentation:

app.module.ts

{
  provide: MAT_TOOLTIP_DEFAULT_OPTIONS,
  useValue: { touchGestures: 'off' },
}

However, this approach doesn't seem to work across my application.

Another approach i tried:

In combination with the npm package ngx-device-detector I have created a method in my app-component.ts which I call when initialising my application. So if the user is on a mobile device according to my service, a .scss class is added to my root element which should globally assign the display: none; property to all mat-tooltips.

app.component.ts

isMobileOrTablet: boolean = false;

constructor(private deviceService: DeviceDetectorService) {
this.checkDevice()
}

checkDevice() {
    if (this.deviceService.isMobile() || this.deviceService.isTablet()) {
      this.isMobileOrTablet = true;
    }
}

get appClasses(): string {
    return this.isMobileOrTablet ? 'disable-tooltips' : '';
  }

styles.scss

.disable-tooltips {
  .mat-tooltip {
    display: none !important;
  }
}

After that i added it to my root-element:

app.component.html

<!-- This is my root-element -->
<app-menue class="{{ appClasses }}"></app-menue>

The class gets correctly assigend to my element when I am on a mobile device, so this works. However, this also has no effect and the tooltips are still displayed on mobile devices ...

Is there a reliable way to configure mat-tooltip globally to disable touch gestures throughout the entire application without having to manually add a matTooltipDisabled property to each element?

Any guidance or examples demonstrating how to achieve this would be greatly appreciated.

Solution

  • It seems that this code worked after all.

    {
  provide: MAT_TOOLTIP_DEFAULT_OPTIONS,
  useValue: { touchGestures: 'off' },
}

    The problem was that my tablet always requested a desktop version. And so I apparently did not trigger any touch events.

    After I removed this checkbox, it worked as intended.