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