Question

我正在经历一种奇怪的行为 - 虽然它可能按预期工作（这就是为什么我不立即提交错误）或者我在{I}}指令使用的地方我不应该这样做？ / p>

当我有一个按钮，打开一个菜单，其中包含一个带有mat-menu-item指令的按钮时，其工具提示似乎奇怪地放错了地方。

使用mat-menu-item - 指令似乎可以解决问题，但按钮行为却不一样。

StackBlitz： https://stackblitz.com/edit/angular-inhkax

如果你点击个人资料，你会看到，“编辑个人资料”工具提示似乎出现在按钮上，只是打开了菜单，即使工具提示属于第二个按钮（三个）内部菜单。

始终是第一个嵌套按钮{* 1}} - 指令的工具提示，它显示在调用者按钮（在本例中为“profile”），因此位于错误的位置

这会导致此工具提示“挂起”，直到此特定嵌套按钮悬停在上方，使错误放置的工具提示消失并导致相同的工具提示出现在正确的指定（或默认）位置。 / p>

您可以在StackBlitz-link中找到软件包及其版本。

Answer 1

似乎是材质菜单重叠的问题。我的猜测是，当菜单打开时，鼠标位于第一个项目上，因此错误地显示了工具提示。您可以通过执行以下操作来避免这种情况：

添加 mat-menu-trigger 的引用，例如

<button mat-button 
        #profileMenuTrigger="matMenuTrigger" 
        [matMenuTriggerFor]="profile">
    <mat-icon>face</mat-icon>&nbsp;Profile
</button>

之后，根据第一个菜单项上的触发状态设置 matTooltipDisabled 输入，如下所示：

<button mat-menu-item 
        matTooltip="Show file upload" 
        [matTooltipDisabled]="!profileMenuTrigger.menuOpen">
    <mat-icon>file_upload</mat-icon>File upload
</button>

链接到更新的StackBlitz。

使用工具栏按钮和嵌套按钮的奇怪的matTooltip行为

1 个答案: