You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Angular 18.2.3中自定义Angular Material Tooltip样式(matTooltipClass)无效的问题求助

Angular 18.2.3中自定义Angular Material Tooltip样式(matTooltipClass)无效的问题求助

大家好,我最近碰到了Angular Material Tooltip样式自定义的棘手问题,想请教下各位开发者的思路:

我的项目基于Angular 18.2.3,通过ng add命令安装了适配版本的Angular Material,并且已经在shared.module.ts里导入并导出了BrowserModule、BrowserAnimationsModule和MatTooltipModule,Tooltip本身的基础功能是正常的。

我在模板里是这么使用Tooltip的:

<a [tabindex]="0" id="testTool" matTooltip="This is a static simple tooltip Text" matTooltipClass="special-class" aria-tooltip="Button that displays and hides a tooltip triggered by other buttons" matTooltipPosition="above" translate>Simple Tooltip Button</a>

但不管我怎么折腾,matTooltipClass指定的special-class就是完全不生效:

  • 试过在组件的SCSS文件里写样式,加不加::ng-deep都没用
  • 也试过把样式移到全局的styles.scss里,依然没有效果

目前唯一能让样式生效的方式,是用全局深度选择器直接覆盖默认类:

::ng-deep .mdc-tooltip__surface {
  /* white-space: pre !important; */
  font-family: monospace !important;
  color: white !important;
  background-color: black !important;
  padding: 10px !important;
  text-align: left !important;
  border-radius: 6px !important;
  max-width: unset !important;
  white-space: pre-wrap !important;
}

可这种方式的问题很明显:所有Tooltip都会被迫使用同一种样式,我没办法给不同的Tooltip单独设置自定义样式了。

有没有大佬能给点提示或者可行的解决办法?万分感谢!

内容来源于stack exchange

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.07 09:14:50