为什么MatToolTip显示在html本机对话框下方?

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();
  }
}

结果

enter image description here

演示

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

推荐答案

此行为是预期的,原因如下:

  1. dialog元素使用::backdrop伪元素.

enter image description here 2. matTooltip uses Material CDK overlay which has z-index of 1000

enter image description here

当一个元素有::backdrop时,它就变成了Top layer,这就把它放在了document流之外.这意味着,除非添加新的Top layer元素,否则任何内容都将始终呈现在它的后面.那么旧的Top layer元素将位于新元素的后面,但仍然位于所有其他元素的顶部.

z-index对值为Top layer的元素没有影响.

阅读更多内容:

Angular相关问答推荐

Angular:浏览器中未显示一些Google Content图标

如何避免使用CSS动画制作的幻灯片中闪烁?

Angular 动画—淡出适用于DIV,不完全适用于子组件

自动完成搜索过滤器不适用于Angular 中动态添加的输入字段

带有搜索功能的CDK-VIRTUAL-SCROLL-VIEPORT不显示该值

TransLoco合并本地和服务器端转换对象

Angular 环境本地无文件替换

笔刷Angular 为17

Angel Project Build从Angel 8升级后,从12MB增加到90MB

列表和映射的SCSS语法

如何以Angular 解析表单控件名称的无值访问器?

ng 生成组件不会创建 ngOnInit 和构造函数

Angular 重新渲染仅使用ngrx在表中更改的行

Rxjs Observable:仅为第一个订阅者获取 HTTP 数据,为其余订阅者获取缓存数据

如何在 Angular 5 HttpInterceptor 中添加多个标头

Springboot/Angular2 - 如何处理 HTML5 url?

EmptyError: no elements in sequence

请求 http.GET 时发送的 Angular2 OPTIONS 方法

NG 测试中的调试测试

如何在 Angular 中使用 router.navigateByUrl 和 router.navigate