Adding shadow to angular material tooltip arrow

Question

I'm trying to add a shadow to angular material tooltip arrow but couldn't able to do it. If you can see in the stackblitz I have customized the tooltip with an arrow but not able to add a shadow to the arrow.

My tooltip CSS:

::ng-deep .tooltip-class {
  background-color: #ffffff !important;
  opacity: 1;
  color: rgba(0, 0, 0, 0.87) !important;
  margin: 0 8px;
  padding: 8px 12px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  border-radius: 6px;
  overflow: visible !important;
  box-shadow: 0px 1px 2px #00000029, 0px 2px 4px #0000001f,
    0px 1px 8px #0000001a;
}

::ng-deep .tooltip-class:before {
  border-right-color: white !important;
}

::ng-deep .tooltip-class:after {
  content: '';
  position: absolute;
  top: 40%;
  right: 100%;
  margin-top: -5px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
}

Answer 1

The tooltip arrow is generated using ::after pseudo-element. You can add shadow to it using filter or you can also create a new rotated pseudo-element ::before and apply box-shadow to it since applying box-shadow to ::after would not be perfect as it would reveal the transparent parts of the box.

.tooltip-class:after {
  filter: drop-shadow(-0.25px 1px 0.75px gray);
}

Stackblitz demo