如何为react-tooltip v5的箭头添加边框？适配多位置显示需求

直接给箭头加边框会因为箭头本身的border绘制逻辑导致样式异常，要实现目标效果，需要用双层箭头叠加的思路：底层箭头设为边框色，上层箭头设为提示框背景色，通过细微偏移露出边框。

具体实现步骤 #

1. 先设置提示框基础样式（确保背景和边框统一）：

.tooltip {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 12px;
}

2. 编写箭头的双层样式，适配bottom/left/right位置：

.arrow {
  position: relative;
  /* 移除原有的border相关设置 */
}

/* 底部弹出的箭头 */
[data-popper-placement^="bottom"] .arrow::before,
[data-popper-placement^="bottom"] .arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 8px 8px 8px;
  border-style: solid;
}
[data-popper-placement^="bottom"] .arrow::before {
  border-bottom-color: #ccc;
  top: -1px; /* 向上偏移露出边框 */
}
[data-popper-placement^="bottom"] .arrow::after {
  border-bottom-color: #fff;
  top: 0;
}

/* 左侧弹出的箭头 */
[data-popper-placement^="left"] .arrow::before,
[data-popper-placement^="left"] .arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-width: 8px 0 8px 8px;
  border-style: solid;
}
[data-popper-placement^="left"] .arrow::before {
  border-left-color: #ccc;
  right: -1px; /* 向右偏移露出边框 */
}
[data-popper-placement^="left"] .arrow::after {
  border-left-color: #fff;
  right: 0;
}

/* 右侧弹出的箭头 */
[data-popper-placement^="right"] .arrow::before,
[data-popper-placement^="right"] .arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-width: 8px 8px 8px 0;
  border-style: solid;
}
[data-popper-placement^="right"] .arrow::before {
  border-right-color: #ccc;
  left: -1px; /* 向左偏移露出边框 */
}
[data-popper-placement^="right"] .arrow::after {
  border-right-color: #fff;
  left: 0;
}

3. 在组件中指定对应的类名：

<Tooltip
  className="tooltip"
  classNameArrow="arrow"
  // 其他配置项
/>

原理说明 #

ReactTooltip的箭头是通过CSS border绘制的三角形，直接加边框会让三角形的三个边都出现边框。用双层箭头叠加，底层箭头作为边框层，上层箭头覆盖在上面并偏移1px，刚好露出底层的边框，完美模拟出带边框的箭头效果，同时适配不同的弹出位置。

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