toolbar按钮与嵌套按钮搭配时matTooltip的异常行为问题

Hey there! I’ve run into this exact tooltip misalignment issue with mat-menu-item before, so let me break down what’s going on and how to fix it.

The Problem #

When you open a mat-menu from a trigger button, any tooltip attached directly to a mat-menu-item button gets stuck on the trigger button instead of its own button. It only fixes itself once you hover over the actual menu item button. Swapping mat-menu-item for mat-button does fix the tooltip position, but you lose the native menu item styling and behavior—totally not ideal.

Why This Happens #

This boils down to a quirk in how Angular Material handles event context for mat-menu-item and mat-tooltip. When the menu first opens, the tooltip’s positioning logic inherits the trigger button’s context instead of the menu item’s, causing that weird misplacement.

Fixes You Can Try #

1. Wrap the Tooltip in an Inner Element (Cleanest Fix) #

Instead of attaching the tooltip directly to the mat-menu-item button, bind it to a nested <span> or <div> inside the button. This gives the tooltip a proper positioning context tied to the menu item:

<mat-menu #profileMenu="matMenu">
  <button mat-menu-item>
    <span matTooltip="View profile">View profile</span>
  </button>
  <button mat-menu-item>
    <span matTooltip="Edit profile">Edit profile</span>
  </button>
</mat-menu>

This works without any extra CSS or TypeScript logic—super straightforward.

2. Use mat-button with Custom Styles to Match mat-menu-item #

If you prefer sticking with mat-button, you can replicate the mat-menu-item look and feel with some simple CSS:

.custom-menu-item {
  width: 100%;
  text-align: left;
  padding: 0 16px;
  border-radius: 0;
  justify-content: flex-start;
}

.custom-menu-item:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

Then update your template:

<mat-menu #profileMenu="matMenu">
  <button mat-button class="custom-menu-item" matTooltip="View profile">
    View profile
  </button>
  <button mat-button class="custom-menu-item" matTooltip="Edit profile">
    Edit profile
  </button>
</mat-menu>

This keeps the tooltip working correctly while maintaining the menu item’s familiar appearance.

3. Manually Toggle Tooltip Visibility with Menu Events #

You can disable tooltips until the menu is fully open, preventing the initial misplacement. Use the menu’s menuOpened and menuClosed events to control tooltip state:

<button mat-icon-button 
        [matMenuTriggerFor]="profileMenu"
        (menuOpened)="menuOpen = true"
        (menuClosed)="menuOpen = false">
  <mat-icon>account_circle</mat-icon>
</button>

<mat-menu #profileMenu="matMenu">
  <button mat-menu-item 
          [matTooltipDisabled]="!menuOpen"
          matTooltip="View profile">
    View profile
  </button>
  <button mat-menu-item 
          [matTooltipDisabled]="!menuOpen"
          matTooltip="Edit profile">
    Edit profile
  </button>
</mat-menu>

Add this to your component class:

menuOpen = false;

This ensures tooltips only activate once the menu is ready, avoiding the context mix-up.

My Recommendation #

Go with the first fix—it’s the simplest and preserves all native mat-menu-item behavior without extra overhead. The other options are great if you need more customization control.

内容的提问来源于stack exchange，提问作者Igor