如何为Angular Material工具提示tooltip的箭头添加阴影效果

你用border实现的三角形箭头无法直接添加box-shadow，因为box-shadow仅作用于元素的矩形盒模型，不会识别你绘制的三角形轮廓。

可以使用CSS filter: drop-shadow()属性代替原本的box-shadow，该属性会基于元素实际渲染的可见形状生成阴影，会自动覆盖tooltip主体和你用伪元素绘制的箭头，修改后的代码如下：

::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为多级drop-shadow，效果和你原有阴影完全一致 */
  filter: drop-shadow(0px 1px 2px #00000029) 
          drop-shadow(0px 2px 4px #0000001f) 
          drop-shadow(0px 1px 8px #0000001a);
}

/* 原有:before规则可以删除，避免和自定义箭头冲突 */
::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;
}

drop-shadow属性兼容所有现代浏览器，Angular项目无需考虑IE兼容的场景下可以直接使用。

内容的提问来源于stack exchange，提问作者deathstroke