angular - 如何在垫子工具提示 div 下放置一个三 Angular 形？

Question

如何在 mat tooltip div 的底部放置一个三 Angular 形？我使用 Angular Material 创建了工具提示，我在 ts 中导入了 TooltipPosition 以将 div 放在上面，我在 scss 中使用 &:after 将 vtriangle 放在 div 的底部，但它不起作用。我附上了代码。如果有任何帮助，我将不胜感激。

import { TooltipPosition } from "@angular/material/tooltip";

@Component({
  selector: "app-financial-information",
  templateUrl: "./financial-information.component.html",
  styleUrls: ["./financial-information.component.scss"]
})
export class TooltipComponent implements OnInit {
//position tooltip content when i hover over the i

  positionOptions: TooltipPosition[] = ["above"];
  position = new FormControl(this.positionOptions[0]);
  constructor( ) { }

  ngOnInit() {}
}

::ng-deep .tooltip-pd {
  position:relative;
  padding: 0.738rem 1.113rem;
  color: $grey1 !important;
  margin-bottom: 5px;
  white-space: pre-line;
  width: 50px;
  height: auto;
  font-size: 0.9rem;
  background: $white;
  border-radius: 7px;
  margin-bottom: 7px;
  left: -200px !important;
  bottom: -10px !important;
  border: 2px solid $grey3;
  &:after {
    content: " ";
    position:absolute;
    bottom:-10px;
    right: 0;
    z-index:999;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 13px 0 13px;
    border-color: rgba(37, 36, 36, 0.9) transparent transparent transparent;
}
}

<div>
                <img src="assets/common/ico.svg" matTooltip="Text from tooltip that appears above"
                  [matTooltipPosition]="position.value" [matTooltipClass]="'tooltip-pd'">
              </div>

Answer 1

如果仔细查看 mat-tooltip 的样式源，您会注意到设置了 overflow: hidden。 (tooltip.scss on github)。一旦将 overflow 属性设置为可见或未设置，整个三 Angular 形将可见。

你修改后的 scss 应该是这样的:

::ng-deep .tooltip-pd {
  /* position:relative; */ /* REMOVED */
  padding: 0.738rem 1.113rem;
  color: $grey1 !important;
  margin-bottom: 5px;
  white-space: pre-line;
  width: 50px;
  height: auto;
  font-size: 0.9rem;
  background: $white;
  border-radius: 7px;
  overflow: visible !important; /* NEW */
  /*margin-bottom: 7px;*/ /* duplicate definition! */
  left: -200px !important;
  bottom: -10px !important;
  border: 2px solid $grey3;
  &:after {
    content: " ";
    position:absolute;
    bottom:-15px; /* previous value: bottom:-10px; */
    right: 0;
    z-index:999;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 13px 0 13px;
    border-color: rgba(37, 36, 36, 0.9) transparent transparent transparent;
}
}

看看这个Stackblitz查看工具提示下方三 Angular 形的工作示例。