如何实现Material Tooltip箭头位置的动态调整？

当前你的Tooltip箭头固定在中间，是因为CSS里硬写了left: 50%，要让箭头精准对齐触发元素，需要根据触发元素的位置动态计算偏移量，下面是两种可行方案：

方案一：自定义指令实现通用对齐逻辑 #

创建一个自定义指令，监听Tooltip的显示事件，自动计算并调整箭头位置，适合全局复用：

import { Directive, ElementRef, OnInit } from '@angular/core';
import { MatTooltip } from '@angular/material/tooltip';

@Directive({
  selector: '[tooltipArrowAlign]'
})
export class TooltipArrowAlignDirective implements OnInit {
  constructor(private tooltip: MatTooltip, private el: ElementRef) {}

  ngOnInit() {
    this.tooltip.opened.subscribe(() => this.adjustArrowPosition());
  }

  private adjustArrowPosition() {
    const triggerEl = this.el.nativeElement;
    const tooltipPanel = document.querySelector('.mat-mdc-tooltip-panel') as HTMLElement;
    if (!tooltipPanel) return;

    const triggerRect = triggerEl.getBoundingClientRect();
    const tooltipRect = tooltipPanel.getBoundingClientRect();

    const triggerCenterX = triggerRect.left + triggerRect.width / 2;
    const arrowOffset = triggerCenterX - tooltipRect.left;

    const arrow = tooltipPanel.querySelector('.mat-mdc-tooltip::before') as HTMLElement;
    if (!arrow) return;

    if (document.dir === 'rtl') {
      arrow.style.right = `${tooltipRect.width - arrowOffset}px`;
      arrow.style.left = 'auto';
    } else {
      arrow.style.left = `${arrowOffset}px`;
      arrow.style.right = 'auto';
    }
  }
}

然后在Tooltip模板上添加该指令：

<i class="characteristic-tooltip-icon" 
   #informationToolTip="matTooltip" 
   refxPopover 
   tooltipArrowAlign
   [ngClass]="'informative' | icon" 
   [matTooltip]="characteristic.additionalInformationKey | o3rTranslate:characteristic.additionalInformationArgs" 
   [attr.aria-label]="characteristic.additionalInformationKey | o3rTranslate:characteristic.additionalInformationArgs" 
   (click)="informationToolTip.toggle()">
</i>

同时修改CSS，移除固定的left:50%，允许动态覆盖：

.mat-mdc-tooltip-panel-below .mat-mdc-tooltip::before {
  left: auto;
  // 保留其他原有样式
}

.mat-mdc-tooltip-panel-above .mat-mdc-tooltip::before {
  left: auto;
  // 保留其他原有样式
}

[dir='rtl'] .mat-mdc-tooltip-panel-below .mat-mdc-tooltip::before,
[dir='rtl'] .mat-mdc-tooltip-panel-above .mat-mdc-tooltip::before {
  right: auto;
}

方案二：组件内直接处理（适合单个组件场景） #

如果不需要全局复用，可在组件内通过ViewChild获取Tooltip实例，监听显示事件调整箭头：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { MatTooltip } from '@angular/material/tooltip';

@Component({
  // 组件元数据
})
export class YourComponent {
  @ViewChild('informationToolTip') tooltip!: MatTooltip;
  @ViewChild('triggerEl') triggerEl!: ElementRef;

  ngAfterViewInit() {
    this.tooltip.opened.subscribe(() => this.adjustTooltipArrow());
  }

  private adjustTooltipArrow() {
    const triggerRect = this.triggerEl.nativeElement.getBoundingClientRect();
    const tooltipPanel = document.querySelector('.mat-mdc-tooltip-panel') as HTMLElement;
    if (!tooltipPanel) return;

    const tooltipRect = tooltipPanel.getBoundingClientRect();
    const triggerCenterX = triggerRect.left + triggerRect.width / 2;
    const arrowOffset = triggerCenterX - tooltipRect.left;

    const arrow = tooltipPanel.querySelector('.mat-mdc-tooltip::before') as HTMLElement;
    if (!arrow) return;

    if (document.dir === 'rtl') {
      arrow.style.right = `${tooltipRect.width - arrowOffset}px`;
      arrow.style.left = 'auto';
    } else {
      arrow.style.left = `${arrowOffset}px`;
      arrow.style.right = 'auto';
    }
  }
}

模板里给触发元素添加#triggerEl标记：

<i #triggerEl class="characteristic-tooltip-icon" 
   #informationToolTip="matTooltip" 
   refxPopover 
   [ngClass]="'informative' | icon" 
   [matTooltip]="characteristic.additionalInformationKey | o3rTranslate:characteristic.additionalInformationArgs" 
   [attr.aria-label]="characteristic.additionalInformationKey | o3rTranslate:characteristic.additionalInformationArgs" 
   (click)="informationToolTip.toggle()">
</i>

关键说明 #

• 核心逻辑是计算触发元素的中心位置，让Tooltip箭头对齐该中心点
• 两种方案都适配了RTL布局，支持不同语言方向
• 必须在Tooltip显示后（opened事件触发时）计算位置，避免DOM未渲染完成导致计算错误

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