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。（tooltip.scss on github）。一旦将overflow属性设置为可见或未设置，整个三角形就会可见。

您修改后的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，可以看到工具提示下方的三角形的工作示例。

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

1 个答案: