Show matTooltip if condition matches else dont show matTooltip on hover-CodePudding

I have written a condition to show the tooltip on hover when the text is more than 16 characters long. If text is less than 16 characters then dont want to show the tooltip. See below code.

<ng-container matColumnDef="name">
  <mat-header-cell *matHeaderCellDef (click)="changeSort('name',$event)"  > API &nbsp; <i *ngIf="sortString=='name' && sortType=='DESC'"  aria-hidden="true"></i> <i *ngIf="sortString=='name' && sortType=='ASC'"  aria-hidden="true"></i></mat-header-cell>
  <mat-cell *matCellDef="let element">
   <span *ngIf="element.name.length < 16" matTooltip="{{element.name}}"
         matTooltipPosition="above">{{element.name}}</span>
   <span *ngIf="element.name.length >= 16" matTooltip="{{element.name}}"
         matTooltipPosition="above">
     {{element.name | slice:0:16 }}..
   </span>
  </mat-cell>
</ng-container>

Could anybody help me how i need to show the tooltip conditionally when the condition matches otherwise i dont want to show the tooltip on hover in mat-table.

Thanks.

CodePudding user response：

Try to below way

 <span [matTooltip]= "element.name.length >= 16 ? element.name : ''" [matTooltipPosition]="element.name.length >= 16 ? 'above' : ''">{{element.name}}</span>

CodePudding user response：

There is a matTooltipDisabled boolean property specifically to disable the tooltip based on a condition.

<mat-cell *matCellDef="let element">
  <span
    [matTooltip]="element.name"
    matTooltipPosition="above"
    [matTooltipDisabled]="element.name < 16"
  >
    {{element.name | slice:0:16 }}..
  </span>
</mat-cell>