Angular中如何程序化触发Tooltip？hover关联元素同步显示

需求说明 #

使用Angular框架，需实现：当鼠标悬浮在textarea元素上时，触发上方label的Tooltip显示，且Tooltip的位置与直接悬浮label时完全一致，无需额外调整CSS或位置参数。

核心思路 #

将label的Tooltip设置为手动触发模式，让textarea的鼠标进入/离开事件直接调用label的Tooltip显示/隐藏方法，这样Tooltip始终基于label元素计算位置，完美复用原hover label时的位置逻辑。

修改后代码实现 #

HTML代码

<div style="margin: 20px">
  <div style="display: flex; flex-direction: column; width: 300px">
    <!-- 添加模板引用变量#userLabel，设置Tooltip为手动触发 -->
    <span
      #userLabel
      class="label"
      [matTooltip]="'John ID 123456'"
      matTooltipTrigger="manual"
      style="width: fit-content"
      <!-- 保留原label的hover触发逻辑 -->
      (mouseenter)="userLabel.matTooltip.show()"
      (mouseleave)="userLabel.matTooltip.hide()"
      >User Name: John Denver</span
    >
    <br>
    <textarea
      class="text-area"
      <!-- 让textarea的hover事件直接调用label的Tooltip方法 -->
      (mouseenter)="userLabel.matTooltip.show()"
      (mouseleave)="userLabel.matTooltip.hide()"
    ></textarea>
  </div>
</div>

TypeScript代码

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 无需额外状态变量，直接通过模板引用调用Tooltip方法
}

说明 #

• 假设你使用的是Angular Material的Tooltip组件（Angular项目中最常用的Tooltip实现），如果是自定义Tooltip指令，只需确保指令提供了show()和hide()这类手动控制方法，替换代码中对应的调用即可。
• 此方案完全复用了label元素的Tooltip位置计算逻辑，因此Tooltip位置与直接hover label时完全一致，无需修改任何CSS或位置参数。

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