Skip to content

bug Mat-menu with tooltip #11030

@BoJIbFbI4

Description

@BoJIbFbI4

Bug, feature request, or proposal:

Using mat-menu with matTooltip give a wrong result (see screenshot).
It occurs because of focus on first mat-item by default.

What is the expected behavior?

show tooltip only on mouse over the right mat-item.

What is the current behavior?

image

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

OS: windows 10
"@angular/cli": "^1.6.7",
"@angular/animations": "^5.2.2",
"@angular/cdk": "^5.2.4",
"@angular/common": "~5.2.2",
"@angular/compiler": "^5.2.2",
"@angular/core": "~5.2.2",
"@angular/flex-layout": "^5.0.0-beta.13",
"@angular/forms": "^5.2.2",
"@angular/http": "^5.2.2",
"@angular/material": "^5.2.4",

Is there anything else we should know?

 <button mat-raised-button color="primary" class=" justify-content-end" [disabled]="!exportBtn"
          [matMenuTriggerFor]="sort"> Export
  </button>
  <mat-menu #sort>
    <ng-container *ngFor="let type of TYPES">
      <button mat-menu-item [matMenuTriggerFor]="submenu" role="button" [hidden]="!type.availability"
              *ngIf="type.array.length > 1">
        <i class="material-icons prc">{{type.icon}}</i>{{type.name}}
      </button>
      <button mat-menu-item role="button" [hidden]="!type.availability" *ngIf="type.array.length < 2"
              [matTooltip]='fileName' [matTooltipPosition]='position' (click)="exportImg(type.type)">
        <i class="material-icons prc">{{type.icon}}</i>{{type.name}}
      </button>
      <mat-menu #submenu>
        <ng-container *ngFor="let sub of type.array">
          <button mat-menu-item role="button" (click)="exportImg(type.type)" [matTooltip]='sub.fileName'
                  [matTooltipPosition]="position">
            <i class="material-icons prc">{{type.icon}}</i>{{(sub.fileName.length > 10)? (sub.fileName |
            slice:0:10)+'..':(sub.fileName) }}
          </button>
        </ng-container>
      </mat-menu>
    </ng-container>
    <button mat-menu-item role="button" (click)="downloadCsv()">
      <i class="material-icons prc">file_download</i>CSV
    </button>
    <button mat-menu-item role="button" [hidden]="!jobZipAvailable" (click)="exportZip()"><i
      class="material-icons prc">file_download</i>Full data
    </button>
  </mat-menu>
</mat-toolbar>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions