向 angular material 工具提示箭头添加阴影

Question

我正在尝试向 angular material 工具提示箭头添加阴影，但无法做到。如果您在 stackblitz 中看到，我已经用箭头自定义了工具提示，但无法为箭头添加阴影。

我的工具提示 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

工具提示箭头是使用 ::after pseudo-element. You can add shadow to it using filter 生成的，或者您也可以创建一个新的旋转伪元素 ::before 并在将 box-shadow 应用于 [=11] 后对其应用框阴影=] 并不完美，因为它会露出盒子的透明部分。

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

Stackblitz demo

向 angular material 工具提示箭头添加阴影

Adding shadow to angular material tooltip arrow

css

angular

angular-material

styling

angular-material-5