Angular中如何为matTooltip添加下标？

方法1：直接使用Unicode下标字符（最便捷） #

Unicode内置了下标形式的数字字符（如₂对应2、₁对应1），直接写入tooltip文本即可，无需额外配置：

<button mat-raised-button matTooltip="CO₂">Hover to see tooltip</button>

这种方式适合固定的下标场景，浏览器会直接渲染出下标效果。

方法2：启用HTML解析（支持动态/复杂下标结构） #

matTooltip默认会转义HTML标签，若要使用<sub>标签实现下标，需要通过DomSanitizer处理HTML内容，确保Angular允许渲染：

1. 在组件中导入并使用DomSanitizer：

import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-tooltip-example',
  templateUrl: './tooltip-example.component.html'
})
export class TooltipExampleComponent {
  tooltipContent: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {
    // 处理包含<sub>标签的HTML内容
    this.tooltipContent = this.sanitizer.bypassSecurityTrustHtml('CO<sub>2</sub> is carbon dioxide');
  }
}

2. 在模板中绑定处理后的HTML到matTooltip：

<button mat-raised-button [matTooltip]="tooltipContent">Hover Me</button>

方法3：自定义CSS样式（全局统一控制） #

如果需要对多个tooltip的下标样式统一管理，可以通过matTooltipClass指定自定义类，配合全局样式实现：

1. 模板中设置tooltip内容和自定义类：

<button 
  mat-raised-button 
  matTooltip="CO<span class='tooltip-sub'>2</span>" 
  matTooltipClass="custom-tooltip"
>
  Hover Me
</button>

2. 在全局样式文件（如styles.scss）中添加样式规则：

.custom-tooltip .mat-tooltip .tooltip-sub {
  vertical-align: sub;
  font-size: 0.7em;
}

⚠️ 注意：这种方式同样需要用DomSanitizer处理tooltip内容，否则<span>标签会被转义成纯文本。

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