MatTooltip设置right位置却显示左侧，求原因

我来帮你排查这个Tooltip位置异常的问题，结合你的代码和补充信息，主要有这几个可能的原因和对应的解决办法：

1. 内容过长触发Tooltip自动位置调整 #

Angular Material的Tooltip自带自动位置适配机制：当你设置的目标位置（比如right）没有足够空间完整显示Tooltip内容时，它会自动切换到相反方向（比如left）来保证用户能看到内容。从你的补充描述来看，这大概率是核心原因。

你可以这样验证和解决：

• 先临时缩短Tooltip文本，看看是否能正常显示在右侧，如果可以，就确认是内容过长导致的自动调整。
• 强制Tooltip使用你设置的位置：添加matTooltipDisableAutoPositioning属性（Angular Material 12+支持），关闭自动适配功能，代码修改如下：

<div class="input-group" 
     matTooltipPosition="right" 
     matTooltipDisableAutoPositioning
     matTooltip="If you have multiple valve sizes this cost of ownership form needs to be completed for each size.">
  <input class="form-control" type="number" [(ngModel)]="cons.valveNumber" [ngModelOptions]="{standalone: true}"/>
</div>

⚠️ 注意：强制位置后如果空间不足，Tooltip可能会被截断或超出视口，建议同时优化内容显示（比如手动换行，在文本中加入<br>标签，需要用[matTooltip]绑定HTML内容：[matTooltip]="'If you have multiple valve sizes<br>this cost of ownership form needs to be completed for each size.'"，或者自定义Tooltip样式让内容自动换行）。

2. 父容器CSS属性干扰定位 #

检查你的.input-group容器或它的父元素是否设置了overflow: hidden、position: fixed/absolute等属性：

• 如果父容器有overflow: hidden，Tooltip可能被裁剪，导致看起来位置偏移，此时可以移除该属性或调整Tooltip的容器层级。
• 确保宿主元素（.input-group）没有被其他元素遮挡，或者存在意外的定位偏移。

3. 模块导入或版本问题 #

先确认MatTooltipModule已经正确导入到你的Angular模块中：

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

@NgModule({
  imports: [
    // ...其他模块
    MatTooltipModule
  ]
})
export class YourFeatureModule { }

如果你的Angular Material版本较旧，可能存在matTooltipPosition的bug，建议升级到稳定版本（比如17.x系列）。

4. 自定义CSS覆盖了默认样式 #

检查全局样式或组件样式中是否有针对.mat-tooltip类的自定义样式，比如修改了left、right、transform等属性，这些会直接干扰Tooltip的定位。可以通过浏览器开发者工具查看Tooltip元素的样式，确认是否有自定义规则冲突。

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