'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>
javascripthtmlcssangularangular-material


Solution 1:[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"

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 H S Progr

Related Questions