MatTooltip show below html native dialog

Question

Why MatTooltip show below html native dialog?

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

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

Result

Demo

https://stackblitz.com/edit/angular-3rx9ry?file=src%2Fapp%2Ftooltip-overview-example.ts

Answer 1

This behavior is expected because of the following:

1. dialog element uses ::backdrop pseudo-element.

2. matTooltip uses Material CDK overlay which has z-index of 1000

When an element has ::backdrop, it becomes the Top layer which puts it outside of the document flow. This means that anything will always be rendered behind it unless a new Top layer element is added. Then the old Top layer element will be behind the new one, but still on top of the every other elements.

z-index has no effect on element that is a Top layer.

Read more:

• Top-layer.
• ::backdrop.