How to put a triangle under the mat tooltip div?

Question

How can i put a triangle at the bottom of the mat tooltip div? I created the tooltip using Angular Material I imported the TooltipPosition in ts to put the div above and i use &:after in scss to put the vtriangle at the bottom of the div but it doesn't work. I attached the code. I would appreciate any help.

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>

Answer 1

If you take a closer look at the style source of the mat-tooltip, you'll notice that overflow: hidden is set. (tooltip.scss on github). Once the overflow property is set to visible or unset, the complete triangle will be visible.

Your modified scss should look like this:

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

Have a look at this Stackblitz to see a working example of a triangle beneath a tooltip.

UPDATE for @angular/material 15.x

Since the structure has changed in newer versions of @angular/material, some CSS adjustments need to be made. Most of the previous definitions can be removed if the default style suits your needs:

/* keep previous */

::ng-deep .tooltip-pd {
  /* remove everything */

  .mdc-tooltip__surface { /* ADDED for Angular 15 */
    border-radius: 0; // to fix gap between container and triangle
  }

  &:after {
    /* keep previous */
  }
}

Adjusted Stackblitz for v15