时间戳

首页 > 解决方案 > 如何在垫工具提示 div 下放置一个三角形？

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

问题描述

如何在垫工具提示 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>

标签： angularangular-material

解决方案

如果您仔细查看 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以查看工具提示下方三角形的工作示例。

推荐阅读