仅当省略号处于活动状态时才显示工具提示

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

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

我已经看到一些使用 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>

Answer 2

可以使用此帮助程序在 JavaScript 中检测元素的溢出，使用 AngularElementRef和此答案中的公式：

function isTextTruncated(element: ElementRef): boolean {
  const e = element.nativeElement;
  return e.scrollWidth > e.clientWidth;
}

然后，在您的组件中，使用它来引用具有“ @ViewChild” 属性的元素：

  @ViewChild('hospitalName') hospitalNameElement: ElementRef;

  isHospitalNameTruncated(): boolean {
    return isTextTruncated(this.hospitalNameElement);
  }

最后，在模板中，添加标识符#hospitalName并调用isHospitalNameTruncated()自定义工具提示文本：

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

Answer 3

另一个改进；叶戈尔的回答很漂亮，但不幸的是ngOnInit可能还不够。例子：

• 当周围的元素[matTooltip]可调整大小时
• 当文本本身可以动态更改时
• 当 CSS 选择器更改元素填充/字体粗细/字体大小等并因此在启动后截断文本时

因此结果是绑定到mouseenter（此时，setTimeout变得多余）：

import { Directive, ElementRef, HostListener } from '@angular/core';
import { MatTooltip } from '@angular/material';

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

  @HostListener('mouseenter', ['$event'])
  setTooltipState() {
      const element = this.elementRef.nativeElement;
      this.matTooltip.disabled = element.scrollWidth <= element.clientWidth;
  }
}