在 angular 中，可通过 html 实体（如 ₂）直接插入 unicode 下标字符（如 co₂），实现 mattooltip 内的下标效果，无需额外组件或 css。
在 angular 中，可通过 html 实体（如 ₂）直接插入 unicode 下标字符（如 co₂），实现 mattooltip 内的下标效果，无需额外组件或 css。
Angular 的 matTooltip 默认仅支持纯文本渲染，不解析 HTML 标签（如 或 ），因此无法通过内联 HTML 实现下标。但得益于浏览器对 Unicode 字符的原生支持，我们可直接使用预定义的 Unicode 下标数字和字母来达成视觉上的下标效果。
例如，要显示 “CO₂”，可将下标 “2” 替换为 Unicode 下标字符 ₂（即 U+2082），完整写为 "CO₂"。同理，其他常用下标可参考：
- ₀: ₀
- ₁: ₁
- ₂: ₂
- ₃: ₃
- ₄: ₄
- ₍: ₇（下标左括号）
- ₎: ₈（下标右括号）
✅ 正确用法示例：
<button mat-raised-button mattooltip="H₂O, CO₂, SO₄" aria-label="Chemical formulas with subscripts"> Show Tooltip </button>
⚠️ 注意事项：
- Unicode 下标字符是独立字形，非缩放后的普通数字，因此字体兼容性良好，但在极少数等宽或老旧字体中可能显示异常；建议在目标浏览器中实测；
- 不支持动态生成复杂下标（如带运算符的 x₁₊₂），此时需权衡是否改用 matTooltipClass + 自定义 tooltip 模板（需启用 matTooltipTemplate 并配合 CdkOverlay）；
- 避免使用 innerHTML 绑定或 DomSanitizer.bypassSecurityTrustHtml() 强行注入 HTML —— 这不仅违反 matTooltip 设计初衷，还可能引发 XSS 风险且被 Angular 自动转义。
综上，对于化学式（如 H₂O、NO₂）、简单编号（如 R₁、ΔT₂）等场景，Unicode 下标实体是最轻量、安全且符合 Angular 最佳实践的解决方案。
