Angular 16中为MatTooltip添加箭头的问题求助

你的代码存在几个核心问题导致箭头无法生效：类名不匹配、缺少箭头伪元素样式、组件视图封装限制了样式穿透。以下是修正后的完整方案：

1. 修正HTML类名匹配 #

将HTML中matTooltipClass的类名与SCSS保持一致，同时使用更规范的属性绑定语法：

<th class="value-style" [matTooltip]="tile.tooltip" [matTooltipPosition]="tooltipPosition" matTooltipClass="homeTooltipClass">{{tile.count}}</th>

2. 添加箭头样式（两种可选方案） #

方案一：组件内快速生效（使用::ng-deep） #

在组件的SCSS文件中添加以下样式，包含箭头伪元素定义：

::ng-deep .homeTooltipClass {
  .mdc-tooltip__surface {
    background: black !important;
    color: white !important;
    font-size: 14px !important;
    max-width: 200px !important;
    border: 1px solid black;
    padding: 5px;
    box-shadow: 1px 1px black;
    position: relative; // 为箭头伪元素提供定位基准
  }

  // 上方Tooltip的箭头（对应tooltipPosition="above"）
  &.mdc-tooltip--above .mdc-tooltip__surface::after {
    content: '';
    position: absolute;
    bottom: -6px; // 让箭头紧贴Tooltip底部
    left: 50%;
    transform: translateX(-50%);
    // 用border绘制三角形箭头
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid black; // 颜色与Tooltip背景一致
  }
}

方案二：全局样式（推荐，避免::ng-deep） #

将样式放到项目根目录的styles.scss中，无需穿透语法，同时可支持多位置箭头：

.homeTooltipClass {
  .mdc-tooltip__surface {
    background: black !important;
    color: white !important;
    font-size: 14px !important;
    max-width: 200px !important;
    border: 1px solid black;
    padding: 5px;
    box-shadow: 1px 1px black;
    position: relative;
  }

  // 上方箭头
  &.mdc-tooltip--above .mdc-tooltip__surface::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid black;
  }

  // 下方箭头（支持tooltipPosition="below"）
  &.mdc-tooltip--below .mdc-tooltip__surface::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid black;
  }

  // 左侧箭头（支持tooltipPosition="left"）
  &.mdc-tooltip--left .mdc-tooltip__surface::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid black;
  }

  // 右侧箭头（支持tooltipPosition="right"）
  &.mdc-tooltip--right .mdc-tooltip__surface::after {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid black;
  }
}

3. 可选：关闭组件视图封装 #

如果不想用::ng-deep也不想用全局样式，可在组件元数据中关闭视图封装：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class YourComponent {
  public tooltipPosition: TooltipPosition = "above";
}

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