angularangularjstooltipmat-autocompletemat-option

Show full option value on hover mat-option

I want to show ellipsis on long option and give full text on hovering any option. Something like this:

Option image

I tried adding tooltip to mat-option but it is not working:


        <form class="example-form" style="margin: 10px; padding-bottom: 0px;">
          <mat-form-field class="example-full-width" style="width: 100%" appearance="fill">
            <mat-label>Select Food</mat-label>
            <input [(ngModel)]="foodName" type="text" placeholder="food" aria-label="food" matInput
              [formControl]="foodForm" [matAutocomplete]="auto" />
            <mat-autocomplete (optionSelected)="selectFood($event)" #auto="matAutocomplete">
              <mat-option *ngFor="let option of foodFilteredOptions | async" [value]="option" [matTooltip]="option">
                {{ option }}
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>
        </form>

I tried mat-tooltip like this also:

 matTooltip="{{type}}"

but nothing is working. Please help

Solution

  • plz import

    import {MatTooltipModule} from '@angular/material/tooltip';

    in module.ts file where component declared

    after check

    https://material.angular.io/components/tooltip/examples

    stackBlitz

    stackBlitz link visit