Angular中MatTooltip显示在HTML原生dialog下方的原因问询

问题原因 #

HTML原生<dialog>元素通过showModal()打开时，会创建一个浏览器原生维护的顶层模态堆叠上下文，这个上下文的层级优先级远高于普通DOM元素。而MatTooltip默认会被渲染到<body>标签的末尾，属于全局普通堆叠上下文，因此会被dialog的模态层覆盖，显示在其下方。

解决方案 #

将MatTooltip附加到dialog元素内部，使其进入dialog的堆叠上下文，就能正常显示在dialog内容之上。具体实现如下：

• 在按钮上通过matTooltipAttachTo属性绑定dialog元素引用
• 给dialog添加position: relative样式，作为tooltip的定位基准

修改后的代码示例：

import { Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'tooltip-overview-example',
  template: `
  <dialog #dialog style="height: 50px; opacity: 0.8; position: relative;">
    <button matTooltip="Test" [matTooltipAttachTo]="dialog">test</button>
  </dialog>
  <button (click)="openDialog()">Open</button>`,
})
export class TooltipOverviewExample {
  @ViewChild('dialog') dialog: ElementRef<HTMLDialogElement>;
  openDialog() {
    this.dialog.nativeElement.showModal();
  }
}

原理说明 #

MatTooltip默认会被动态插入到<body>末尾，属于全局堆叠上下文。通过matTooltipAttachTo将其挂载到dialog元素上后，tooltip会成为dialog的子元素，继承dialog的堆叠上下文，此时它的层级会高于dialog内部的其他内容，不会被dialog的模态层遮挡。

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