如何在Angular Material Tooltip中显示上标字符？

架构老林

2026-8-20

解决MatTooltip中无法显示HTML上标的问题

核心原因

MatTooltip默认会转义所有HTML标签，所以<sup>a</sup>会被当作纯文本输出，无法解析为上标格式。

解决方案

方法1：使用DomSanitizer处理HTML内容（推荐）

在组件中引入DomSanitizer和SafeHtml：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  tooltipContent: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {
    this.tooltipContent = this.sanitizer.bypassSecurityTrustHtml(
      'Treatment-Emergent Adverse Events <sup>a</sup> Terms Suggestive of Abuse Potential Leading to Study or Study Drug Discontinuation by Decreasing Frequency Safety Analysis Set'
    );
  }
}

在模板中绑定处理后的安全HTML：

<button [matTooltip]="tooltipContent" matTooltipClass="custom-tooltip">
  悬停查看提示
</button>

可选：添加CSS确保上标样式生效（部分场景下需要）：

.custom-tooltip sup {
  font-size: 0.7em;
  vertical-align: super;
}

方法2：使用自定义Tooltip模板

如果需要更复杂的HTML结构，可直接用模板定义Tooltip内容：

<ng-template #tooltipTemplate>
  Treatment-Emergent Adverse Events <sup>a</sup> Terms Suggestive of Abuse Potential Leading to Study or Study Drug Discontinuation by Decreasing Frequency Safety Analysis Set
</ng-template>

<button [matTooltip]="''" [matTooltipTemplate]="tooltipTemplate">
  悬停查看提示
</button>

注：该方式需确保Angular Material版本支持matTooltipTemplate属性（多数新版本均支持）。