使用 matTooltip angular 材質的工具提示設置箭頭

Question

在 angular 材質中，它提供了 matTooltip 屬性來顯示工具提示。 我想顯示帶有指向溢出文本的工具提示的箭頭。 但工具提示 position 是基於目標元素 position 在角落、頂部或底部的動態，根據工具提示設計中的附加箭頭，根據工具提示 position 是困難的，我應用了以下解決方案，但僅當我在指定的 position 頂部、底部、左側打開工具提示時才有效或對

.mat-tooltip::before {
      content     : '';
      display     : block;
      position    : absolute;
      bottom      : 100%;
      border-style: solid;
      border-color: transparent transparent #3E464E transparent;
      border-width: 12px;
      left        : calc(50% - 12px);
}  


<div class="title-ellips"
   matTooltipClass="custom-tooltip"
   matTooltip="{{exam | examColumnValue: column}}"
  *ngIf="((exam[column]) && ((exam | examColumnValue: column).toString().length>=30))"
   placement="top" data-container="body" tooltipClass="customTableTooltip">
  {{exam | examColumnValue: column}}
</div>

Answer 1

可以按如下方式進行：

css：

.mat-tooltip {
  position: absolute;

  &::after {
    width: 0;
    height: 0;
    content: '';
    position: absolute;
    border-left: 0.5rem solid transparent;
    border-right: 0.5rem solid transparent;
    border-bottom: 0.5rem solid black;
  }
  &.below {
    overflow: initial;
    margin-top: 1rem;
    &:after {
      top: -0.5rem;
      right: calc(50% - 0.5rem);
      transform: rotate(0);
    }
  }

  &.above {
    overflow: initial;
    margin-bottom: 1rem;
    &:after {
      bottom: -0.5rem;
      right: calc(50% - 0.5rem);
      transform: rotate(180deg);
    }
  }

  &.right {
    overflow: initial;
    margin-left: 1rem;
    &:after {
      left: -0.75rem;
      top: calc(50% - 0.25rem);
      transform: rotate(270deg);
    }
  }

  &.left {
    overflow: initial;
    margin-right: 1rem;
    &:after {
      right: -0.75rem;
      top: calc(50% - 0.25rem);
      transform: rotate(90deg);
    }
  }
}

在 component.ts 文件中：

  positionOptions: TooltipPosition[] = ['below', 'above', 'left', 'right'];
  // You can change the logic of currentPosition according to your requirements
  currentPosition= this.positionOptions[0];

在 html 文件中：

[matTooltipPosition]="currentPosition"
[matTooltipClass]="currentPosition"