React项目中如何为Tooltip箭头添加位于内容下方的阴影？

你的问题核心在于给伪元素单独设置drop-shadow时，阴影会和容器的box-shadow冲突，导致覆盖或怪异效果。正确的做法是给整个Tooltip的父容器应用filter: drop-shadow，让容器和箭头共享统一的阴影效果，同时移除容器自身的box-shadow。

修改后的代码： #

CSS部分

/* 新增父容器，用于统一生成阴影 */
.toolTip-wrapper {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-80%);
  filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.25));
}

.toolTip-container {
  padding: 10px;
  width: 300px;
  /* 移除原box-shadow，改用父容器的drop-shadow实现统一阴影 */
  background-color: white;
  border-radius: 4px;
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #333333;
  visibility: visible;
  opacity: 1;
  white-space: normal;
  word-wrap: break-word;
  text-align: center;
  vertical-align: middle;
}

.toolTip-container::after {
  content: " ";
  position: absolute;
  bottom: 100%; /* 箭头位于容器顶部外侧 */
  left: 75%;
  transform: translateX(-50%); /* 修正箭头水平居中 */
  border-width: 29px;
  border-style: solid;
  /* 生成指向上方的箭头：顶部边框为白色，其余方向透明 */
  border-color: white transparent transparent transparent;
}

React部分

function Example() {
  return <ToolTip text="Example text"></ToolTip>;
}

function ToolTip({ text }: ToolTipProps) {
  return (
    <div className="toolTip-wrapper">
      <div className="toolTip-container">{text}</div>
    </div>
  );
}

关键调整说明 #

1. 统一阴影生成：通过父容器的filter: drop-shadow，容器和伪元素会被视为一个整体生成阴影，彻底避免单独设置阴影时的冲突问题。
2. 修正箭头样式：原伪元素边框写法有误，调整后通过border-color直接定义箭头方向，确保箭头形状正确且指向上方。
3. 居中修正：将原transform: translateX(50%)改为translateX(-50%)，让箭头在指定位置水平居中。

这样调整后，箭头与容器的阴影完全匹配，同时能保持箭头的尺寸、颜色与网站内其他Tooltip一致。

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