嘿，这个问题我之前做tooltip组件时也碰到过！核心原因就是tooltip的箭头伪元素（Microtip里一般是::before）默认层级比带阴影的气泡主体（::after）低，所以被主体的阴影盖住了。咱们只需要调整箭头的层级，同时对齐样式就能搞定～

修改后的CSS代码 #

&[aria-label][role="tooltip"] {
  --microtip-font-size: 15px;
  
  /* Tooltip气泡主体 */
  &::after {
    box-shadow: 5px 9px 45px 4px darkgrey;
    border-radius: 7px;
    border: 1px solid darkgrey;
    background-color: white;
    color: #000080;
    /* 给主体设置基础层级，让箭头能在它上方 */
    z-index: 1;
  }
  
  /* Tooltip箭头元素 */
  &::before {
    /* 箭头背景色和主体保持一致，避免透色 */
    background-color: white;
    /* 给箭头设置更高层级，确保在主体前方 */
    z-index: 2;
    /* 箭头边框色和主体边框匹配，保持视觉统一 */
    border-color: darkgrey;
  }
}

关键说明 #

• 层级调整：通过给箭头设置z-index: 2，主体设置z-index: 1，让箭头完全覆盖在气泡主体的上方，阴影就不会再遮挡箭头了。
• 样式对齐：把箭头的背景色、边框色和主体保持一致，这样整个tooltip看起来是一个完整的整体，不会出现颜色断层或者奇怪的缝隙。
• 放弃背景图方案：你之前尝试用背景图做箭头其实没必要，Microtip默认是用CSS边框实现箭头的，直接调整它的样式和层级就足够了。

这样修改后，你的tooltip箭头就能正常显示在主体前方，不会被阴影遮挡啦～

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