css - 确定 Angular Material 工具提示的方向以应用箭头

Question

我正在使用 Angular Material 从事 Angular v10 元素。我想为 mat-tooltip 编写样式，为其提供一个指向触发工具提示的内容的箭头。

这就是我现在拥有的:

我通过添加以下样式实现了这一点:

.mat-tooltip.ds-tooltip {
    overflow: visible;

    &::before {
        content     : '';
        display     : block;
        position    : absolute;
        bottom      : 100%;
        border-style: solid;
        border-color: transparent transparent black transparent;
        border-width: 12px;
        left        : calc(50% - 12px);
    }
}

但是，这仅在工具提示位于内容下方时才有效，如果工具提示应用于任何其他方向，顶部仍将有一个箭头:

箭头现在应该指向下。

有没有办法做我想要用 Material 做的事情？我想我需要确定工具提示的放置方向，然后以某种方式相应地应用不同的样式，有没有办法做到这一点？

Answer 1

根据 documentation ，根据应用于工具提示的位置，将应用不同的类:mat-tooltip-panel-above、mat-tooltip-panel-below、mat-tooltip-panel-左，mat-tooltip-panel-right。

因此，基本上您需要为父容器的每个父类指定样式:

.mat-tooltip-panel-below {
  .mat-tooltip.ds-tooltip {
    overflow: visible;
  
    &::before {
      content: '';
      display: block;
      position: absolute;
      bottom: 100%;
      border-style: solid;
      border-color: transparent transparent black transparent;
      border-width: 12px;
      left: calc(50% - 12px);
    }
  }
}

.mat-tooltip-panel-above {
  .mat-tooltip.ds-tooltip {
    overflow: visible;
  
    &::before {
      content: '';
      display: block;
      position: absolute;
      top: 100%;
      border-style: solid;
      border-color: black transparent transparent  transparent;
      border-width: 12px;
      left: calc(50% - 12px);
    }
  }
}