CODEWITHSUNDEEP
angularangularjstooltipmat-autocompletemat-option
404NotFound
404NotFound

Reputation: 327

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

Upvotes: 0

Views: 418

Answers (1)

codewithharshad
codewithharshad

Reputation: 361

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

Upvotes: 1

Related Questions