使用 matTooltip angular 材质的工具提示设置箭头

Question

in angular material it provide matTooltip attribute to show tooltip. i want to show arrow with tooltip pointing towards overflow text. but tooltip position is dynamic based on target element position in corners, top or bottom based on that appending arrow in tooltip design as per tooltip position is difficult, i applied bellow solution but works only if i open tooltip at specified position top, bottom, left or right

.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

It can be done as follow:

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);
    }
  }
}

In component.ts file:

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

In html file:

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