如何让Material Tooltip箭头动态指向触发元素？

当前使用matTooltip时，自定义箭头始终固定在Tooltip容器中间，当Tooltip因屏幕边缘溢出自动偏移位置后，箭头无法正确指向触发图标。以下是实现动态调整箭头水平位置的可行方案：

步骤1：监听Tooltip位置变化并计算偏移量 #

在模板中绑定tooltipPositionChange事件，同时给触发元素添加模板引用变量以获取DOM位置：

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

在组件类中实现偏移量计算逻辑，通过CSS变量传递给箭头样式：

import { MatTooltipPositionChange } from '@angular/material/tooltip';

// ...

adjustTooltipArrow(event: MatTooltipPositionChange, triggerElement: HTMLElement) {
  const tooltipPanel = document.querySelector('.mat-mdc-tooltip-panel') as HTMLElement;
  if (!tooltipPanel || !triggerElement) return;

  // 获取触发元素与Tooltip面板的位置信息
  const triggerRect = triggerElement.getBoundingClientRect();
  const panelRect = tooltipPanel.getBoundingClientRect();

  // 计算箭头相对于面板的偏移百分比（对准触发元素中心）
  const triggerCenterX = triggerRect.left + triggerRect.width / 2;
  const panelLeft = panelRect.left;
  const panelWidth = panelRect.width;
  const arrowOffsetPercent = ((triggerCenterX - panelLeft) / panelWidth) * 100;

  // 设置CSS变量供样式使用
  tooltipPanel.style.setProperty('--tooltip-arrow-offset', `${arrowOffsetPercent}%`);
}

步骤2：修改CSS样式适配动态偏移 #

更新自定义Tooltip样式，将箭头的固定位置替换为动态CSS变量：

.mat-mdc-tooltip {
  background: $o3r-color-accent-A100 !important;
  border-radius: .5rem;
  margin-top: 1.125rem;
  margin-inline-start: 1rem;

  .mdc-tooltip__surface {
    background-color: transparent !important;
    padding: .75rem;
    font-size: .75rem !important;
  }
}

.mat-mdc-tooltip-panel-below {
  .mat-mdc-tooltip {
    &::before {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      border: 8px solid transparent;
      border-bottom-color: $o3r-color-accent-A100;
      display: block;
      transform: translate(-50%, -50%);
      bottom: 100% !important;
      left: var(--tooltip-arrow-offset, 50%);

      [dir='rtl'] & {
        right: var(--tooltip-arrow-offset, 50%);
        left: auto;
      }
    }
  }
}

.mat-mdc-tooltip-panel-above {
  .mat-mdc-tooltip {
    &::before {
      content: '';
      width: 0;
      height: 0;
      position: absolute;
      top: 100% !important;
      left: var(--tooltip-arrow-offset, 50%);
      border: 8px solid transparent;
      border-top-color: $o3r-color-accent-A100;
      display: block;
      transform: translate(-50%, 0);

      [dir='rtl'] & {
        right: var(--tooltip-arrow-offset, 50%);
        left: auto;
      }
    }
  }
}

补充说明 #

• 每次Tooltip位置变化（包括首次显示、屏幕滚动导致的重新定位）都会触发计算，保证箭头始终对准触发元素
• RTL布局下通过方向选择器自动切换箭头的左右定位逻辑
• 保留默认值50%作为降级方案，避免变量未设置时的样式异常

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