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

Question

如何在垫子工具提示 div 的底部放置一个三角形？我使用 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已设置。（github 上的 tooltip.scss）。一旦溢出属性设置为可见或未设置，完整的三角形将可见。

修改后的 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/Material 15.x 的更新

由于新版本的 @angular/material 的结构发生了变化，因此需要进行一些 CSS 调整。如果默认样式适合您的需要，则可以删除大多数先前的定义：

/* keep previous */

::ng-deep .tooltip-pd {
  /* remove everything */

  .mdc-tooltip__surface { /* ADDED for Angular 15 */
    border-radius: 0; // to fix gap between container and triangle
  }

  &:after {
    /* keep previous */
  }
}

针对 v15调整了Stackblitz