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;
}

我希望仅根据省略号来动态显示工具提示，但是问题是显示了工具提示，但是对于没有省略号的数据也正在显示它。我使用的是角材料

我在参考了一些网站后写了一些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

使用Angular message topIntent 0 message1 {'intent': 'UseCasePaymentArrangement', 'score...和来自此answer的公式，可以使用此助手在JavaScript中检测元素的溢出：

ElementRef

然后，在您的组件中，使用它通过“ 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()

Answer 3

代替

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

使用

public ngAfterViewInit(): void {
  const element = this.elementRef.nativeElement;
  this.matTooltip.disabled = element.scrollWidth <= element.clientWidth;
}

Answer 4

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

[matTooltip]周围的元素可调整大小时
何时可以动态更改文本本身
当CSS选择器更改元素padding / font-weight / font-size等时，结果在启动后会截断文本

因此，结果是绑定到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;
  }
}

Answer 5

重用 Romain Deneau 的答案，我会将代码简化成这样

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

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

5 个答案: