Angular mat-option悬浮显示完整值：添加matTooltip无效求助

1. 实现文本省略样式 #

先给选项文本添加CSS样式，强制单行显示并溢出省略：

/* 可放在全局样式文件或组件内的::ng-deep块中 */
.option-truncated-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  width: 100%;
}

2. 修复matTooltip不生效问题 #

直接给mat-option绑定tooltip可能因组件内部事件拦截失效，建议将tooltip绑定到选项内部的文本容器上，同时确保已导入MatTooltipModule：

修改HTML代码 #

<form class="example-form" style="margin: 10px; padding-bottom: 0px;">
  <mat-form-field class="example-full-width" style="width: 100%" appearance="fill">
    <mat-label>Select Food</mat-label>
    <input [(ngModel)]="foodName" type="text" placeholder="food" aria-label="food" matInput
           [formControl]="foodForm" [matAutocomplete]="auto" />
    <mat-autocomplete (optionSelected)="selectFood($event)" #auto="matAutocomplete">
      <mat-option *ngFor="let option of foodFilteredOptions | async" [value]="option">
        <!-- 用span包裹文本并绑定tooltip -->
        <span class="option-truncated-text" 
              [matTooltip]="option" 
              matTooltipPosition="right"
              matTooltipTrigger="mouseenter">
          {{ option }}
        </span>
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

确保模块导入MatTooltipModule #

在对应Angular模块（如AppModule或功能模块）中导入tooltip模块：

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

@NgModule({
  declarations: [/* 你的组件 */],
  imports: [
    // ...其他Material模块（如MatAutocompleteModule、MatInputModule等）
    MatTooltipModule
  ]
})
export class YourModule { }

3. 可选：优化tooltip显示体验 #

• 调整tooltip位置：通过matTooltipPosition设置right/above等，避免被页面元素遮挡
• 增加显示延迟：添加matTooltipShowDelay="300"，防止鼠标快速划过误触发

优化后的span标签示例：

<span class="option-truncated-text" 
      [matTooltip]="option" 
      matTooltipPosition="right"
      matTooltipTrigger="mouseenter"
      matTooltipShowDelay="300">
  {{ option }}
</span>

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