javascript - Angular Material MatToolTip 仅在元素被截断时显示

（编辑：请帮帮我，大家，我快不行了。这个问题还没有完全解决，请参考评论）

我希望 matTooltip 仅在标签实际溢出时显示。比如：当文本溢出时显示，当文本未溢出时不显示提示。

这是我尝试使用 matTooltipDisabled 的损坏代码：

HTML（有些代码我用“...”省略了，因为我认为它们与问题无关。基本上在HTML中，某些标签除非点击下拉菜单，否则不会显示，这对于工具提示也是一个问题）：

<div *ngFor="...; let i = index">
            <div class="panel-container-label">
              <div *ngIf="i < 5" fxLayout="row" fxLayoutAlign="space-between center">
                <div>
                  <span matTooltip="..." [matTooltipPosition]="'after'" [matTooltipDisabled]="!ifOverflow(toolTip)" #toolTip>
                    <mat-checkbox class="search-facet-checkboxes" ...>
                      ...
                    </mat-checkbox>
                  </span>
                </div>
              </div>
              <div *ngIf="i >= 5 &&..." fxLayout="row" fxLayoutAlign="space-between center">
                <div class="container-name-oflw">
                  <span matTooltip="..." [matTooltipPosition]="'after'" [matTooltipDisabled]="!ifOverflow(toolTip)" #toolTip>
                    <mat-checkbox class="search-facet-checkboxes" ...>
                      ...
                    </mat-checkbox>
                  </span>
                </div>
              </div>
            </div>
          </div>

CSS ：

.search-facet-checkboxes .mat-checkbox-layout .mat-checkbox-label {
  font-weight: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

div.panel-container-label {
  background-color: #ffffff;
  color: #487980;
  padding: 0 10px;
  clear: both;
  overflow: hidden;
  .container-name-oflw {
    width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

TS :

ifOverflow(e){
    console.log(e.scrollWidth + " and " + e.clientWidth)
    return e.scrollWidth > e.clientWidth;
  }

然后控制台对 scrollWidth 和 ClientWidth 都打印 0，我不知道为什么。

我也尝试过使用带有本地引用 #toolTip 的 ViewChild，但它也不起作用，我在控制台上收到一个错误，提示 Cannot read property 'native-element' of undefined。

我并不真的想像这样使用没有 Angular Material 的指令：https://medium.com/@anup.bangale/showing-tooltip-only-when-text-overflow-ellipsis-active-angular8-bd5e9d7667a9，因为那会涉及创建一个新文件，而我需要使用 Angular Material。

我几乎浏览了所有与这个问题相关的 Stack Overflow 帖子。请帮忙，谢谢！

答案＃1

看起来你的想法是对的。但我认为你需要使用 div 而不是 span，或者在 CSS 中将 display 改为 block 或 inline-block。因为使用 inline 元素时，宽度是 0。我以前也实现过同样的想法，所以我整理了一个简单的示例，以防对你有帮助：

https://stackblitz.com/edit/angular-material-tooltip-overflow

关于 inline 元素宽度的信息：clientWidth 和 clientHeight 报告为零，而 getBoundingClientRect 是正确的