javascript - 仅在省略号处于事件状态时显示工具提示

Question

HTML:

<td mat-cell [attr.id]="hospital.organizational_id + '_hospitalname'" 
    *matCellDef="let hospital">
    <div id="hospital_name" class="truncate" 
        [matTooltip]="hospital.organization_name.length > 32 ? 
        hospital.organization_name: '' ">
        {{hospital.organization_name}}
    </div>
</td>

CSS:

.truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block !important;
}

我希望纯粹根据省略号动态显示工具提示。但问题是显示了工具提示，但它也会显示没有省略号的数据。我正在使用 Angular Material

我引用了一些网站后写了一些CSS

预期的行为是应该只为带有省略号的数据获取工具提示，否则它应该被隐藏，你可以看到我正在使用 Angular Material 。

我见过一些使用 jquery 的解决方案，但它对我不起作用。 有办法解决吗？

提前致谢

Answer 1

根据 Romain Deneau 的回答，我创建了一个小指令

@Directive({
  selector: '[matTooltip][appShowIfTruncated]'
})
export class ShowIfTruncatedDirective implements OnInit {
  constructor(
    private matTooltip: MatTooltip,
    private elementRef: ElementRef<HTMLElement>
  ) {
  }

  public ngOnInit(): void {
    // Wait for DOM update
    setTimeout(() => {
      const element = this.elementRef.nativeElement;
      this.matTooltip.disabled = element.scrollWidth <= element.clientWidth;
    });
  }
}

您可以更轻松地使用它

<td mat-cell [attr.id]="hospital.organizational_id + '_hospitalname'" *matCellDef="let hospital">
  <div id="hospital_name" class="truncate" [matTooltip]="hospital.organization_name" appShowIfTruncated>
    {{hospital.organization_name}}
  </div>
</td>