(Update: Urgent assistance needed! I am facing a critical issue. This problem persists, please check the comments for further details)
I am seeking a solution to make the matTooltip appear only when the labels exceed their designated space limit.
For instance: when text overflows, and if they do not overflow, no tooltips should be displayed.
Below is the code snippet where I attempted to utilize matTooltipDisabled:
HTML (I have omitted some code as I believe it's irrelevant to the issue. Essentially, in the HTML, certain labels remain hidden until the dropdown is clicked, which also poses 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;
}
}
TypeScript:
ifOverflow(e){
console.log(e.scrollWidth + " and " + e.clientWidth)
return e.scrollWidth > e.clientWidth;
}
The console is displaying 0 for both scrollWidth and ClientWidth, and I am unable to determine the reason behind this discrepancy.
I also experimented with ViewChild using a local reference #toolTip, but encountered an error stating
Cannot read property 'native-element' of undefinedEmploying a directive without Angular Material like the one mentioned here: https://medium.com/@anup.bangale/showing-tooltip-only-when-text-overflow-ellipsis-active-angular8-bd5e9d7667a9 wasn't preferred as it involves creating a new file, and I specifically need to utilize Angular Material.
I have exhaustively browsed through numerous Stack Overflow threads related to this issue. Your guidance and support would be greatly appreciated. Thank you!