Angular Material MatToolTip show up only when the element is truncated

Question

(Edit: Please help guys I'm dying. This problem is not completely resolved, please refer to the comments)

I want to have the matTooltip show up only when the labels are actually overflown. like: when text is overflown, and when they are not, no tooltips.

Here is my broken code with trying to use matTooltipDisabled:

HTML (There are some code that I eliminated with "..." since I don't think they are necessary for the issue. Basically in the HTML, some labels will not be displayed unless you click on the dropdown, which is also a concern for tooltips):

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

The console then prints 0 for both scrollWidth and ClientWidth, I have no idea why.

I also tried something with ViewChild with local reference #toolTip, but it didn't work out either, I got an error on the console saying that Cannot read property 'native-element' of undefined.

I didn't really want to use directive without Angular Material like this: https://medium.com/@anup.bangale/showing-tooltip-only-when-text-overflow-ellipsis-active-angular8-bd5e9d7667a9, because that will involve creating a new file, and I need to use Angular Material.

I pretty much went through all Stack Overflow posts related to this problem. Please send help, thank you!

score 3 · Accepted Answer · answered Feb 10 '21 at 21:54

3

It looks like you have the right idea. But I think you need to use a div instead of span, or change the display to be block or inline-block in the CSS. Because with inline elements the width is 0. I've implemented this same idea before, so I put together a simple example in case it helps:

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

Info about inline element width: clientWidth and clientHeight report zero while getBoundingClientRect is correct

answered Feb 10 '21 at 21:54

Matt Nienow

1,168
6
16

Thank you so much! I changed `span` into `div` now the console is logging, but it seems like it always logs the same number for both `scrollWidth` and `clientWidth` - I'm guessing that's the value of the client width. I'm wondering if you have any ideas? – Onion Feb 11 '21 at 21:43
@WendyZhang I think it is because the element you are checking needs to be the element that is overflowing. Right now, you are checking the width of the div, but the checkbox has the overflow styles. So try either setting the overflow styles on the div instead of the checkbox, or move the #toolTip reference to the checkbox. – Matt Nienow Feb 11 '21 at 22:03
Thank you so much!! The tooltips are working now! Here is what I did: ``.search-facet-checkboxes .mat-checkbox-layout .mat-checkbox-label { font-weight: normal !important; } `` ``.tooltip-div { overflow: hidden !important; text-overflow: ellipsis !important; }`` The problem is, now there's no ellipsis for some reason. If I move the `#tooltip` to checkbox then the whole scrollWidth and clientWidth will be undefined again - the problem you mentioned before. – Onion Feb 12 '21 at 15:55
Wondering if there's a way to go about it? @MattNienow – Onion Feb 17 '21 at 14:34

Angular Material MatToolTip show up only when the element is truncated

1 Answers1