set arrow with tooltip of matTooltip angular material

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>