如何在移动端全局禁用Angular Material的Mat-Tooltip？

方法1：动态配置MAT_TOOLTIP_DEFAULT_OPTIONS（推荐） #

你之前的静态配置无法动态适配设备，改用useFactory结合设备检测服务，在应用初始化时根据设备类型设置触摸手势：

app.module.ts

import { NgModule } from '@angular/core';
import { MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipDefaultOptions } from '@angular/material/tooltip';
import { DeviceDetectorService } from 'ngx-device-detector';

export function tooltipOptionsFactory(deviceService: DeviceDetectorService): MatTooltipDefaultOptions {
  const isMobile = deviceService.isMobile() || deviceService.isTablet();
  return {
    touchGestures: isMobile ? 'off' : 'auto'
  };
}

@NgModule({
  providers: [
    {
      provide: MAT_TOOLTIP_DEFAULT_OPTIONS,
      useFactory: tooltipOptionsFactory,
      deps: [DeviceDetectorService]
    }
  ]
})
export class AppModule { }

该方案会全局设置tooltip的触摸行为，移动端直接关闭触摸触发逻辑，桌面端保留默认的hover/触摸交互，完全匹配需求。

方法2：修复全局样式方案 #

你之前的样式无效是因为mat-tooltip元素直接附加到<body>上，不会继承根组件的类。修改为给<body>添加控制类，再编写全局样式：

app.component.ts

import { Component, OnInit, Renderer2 } from '@angular/core';
import { DeviceDetectorService } from 'ngx-device-detector';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  constructor(
    private deviceService: DeviceDetectorService,
    private renderer: Renderer2
  ) {}

  ngOnInit(): void {
    const isMobileOrTablet = this.deviceService.isMobile() || this.deviceService.isTablet();
    if (isMobileOrTablet) {
      this.renderer.addClass(document.body, 'disable-tooltips');
    }
  }
}

styles.scss

body.disable-tooltips .mat-tooltip {
  display: none !important;
  pointer-events: none !important; /* 彻底阻止触摸触发事件 */
}

这样样式就能作用到所有tooltip元素，因为它们都挂载在body节点下。

方法3：全局自定义指令自动禁用tooltip #

创建全局指令，自动给所有带有matTooltip属性的元素添加禁用状态，当检测到移动端时：

disable-mobile-tooltip.directive.ts

import { Directive, OnInit } from '@angular/core';
import { DeviceDetectorService } from 'ngx-device-detector';
import { MatTooltip } from '@angular/material/tooltip';

@Directive({
  selector: '[matTooltip]',
  standalone: true, // Angular 14+独立组件模式下启用
})
export class DisableMobileTooltipDirective implements OnInit {
  constructor(
    private tooltip: MatTooltip,
    private deviceService: DeviceDetectorService
  ) {}

  ngOnInit(): void {
    const isMobile = this.deviceService.isMobile() || this.deviceService.isTablet();
    this.tooltip.disabled = isMobile;
  }
}

在AppModule中声明该指令（或在独立组件模式下的bootstrap配置中导入），所有带matTooltip的元素会自动在移动端禁用tooltip。

内容的提问来源于stack exchange，提问作者stax