我来帮你搞定这两个样式问题，其实核心是Highcharts默认的箭头样式没被你的自定义CSS覆盖，而且箭头本身需要单独处理边框效果：

问题原因分析 #

1. 你当前的CSS只作用于提示框的矩形<span>元素，但箭头是Highcharts通过默认样式生成的（通常用border模拟三角形），所以没被黑色背景样式影响，显示成白色。
2. 白色边框穿透箭头是因为默认箭头本身没有边框，和提示框的边框没有衔接，看起来就像边框“穿”过去了。

完整解决方案 #

我们需要自定义箭头样式，用两个伪元素分别实现箭头的黑色主体和白色边框，同时覆盖Highcharts的默认箭头：

1. 修改现有CSS并添加箭头样式 #

.highcharts-tooltip span {
  line-height: 1;
  font-weight: normal;
  padding: 12px;
  background-color: rgba(0,0,0,0.9);
  color: white;
  border-radius: 6px;
  font-size: 16px;
  text-align: center;
  transition: opacity 0.1s;
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.85);
  z-index: 9999;
  max-width: 300px;
  pointer-events: none;
  word-wrap: break-word;
  position: relative; /* 新增：让伪元素能相对这个元素定位 */
}

/* 移除Highcharts默认的箭头边框样式，避免冲突 */
.highcharts-tooltip {
  border: none !important;
}

/* 伪元素1：白色边框箭头（放在下层） */
.highcharts-tooltip span::before {
  content: '';
  position: absolute;
  bottom: -11px; /* 位置：比主体箭头低1px */
  left: 50%;
  transform: translateX(-50%);
  border: 11px solid transparent;
  border-top-color: rgba(255,255,255,0.85); /* 边框颜色和提示框白色边框一致 */
  z-index: 0;
}

/* 伪元素2：黑色主体箭头（放在上层，覆盖边框箭头的中间部分） */
.highcharts-tooltip span::after {
  content: '';
  position: absolute;
  bottom: -10px; /* 位置：比边框箭头高1px */
  left: 50%;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-top-color: rgba(0,0,0,0.9); /* 箭头颜色和提示框背景一致 */
  z-index: 1;
}

2. 适配箭头方向（可选） #

如果你的提示框可能出现在数据点的上方或下方（箭头方向改变），可以结合Highcharts的positioner函数自动切换箭头样式：

添加JS配置

tooltip: {
  positioner: function(labelWidth, labelHeight, point) {
    // 自定义提示框位置，你可以根据需求调整
    const position = { 
      x: point.plotX + 10, 
      y: point.plotY - labelHeight - 10 
    };
    // 根据位置判断箭头方向，添加对应类名
    const tooltipEl = this.chart.container.querySelector('.highcharts-tooltip');
    tooltipEl.classList.toggle('tooltip-down', position.y < point.plotY);
    tooltipEl.classList.toggle('tooltip-up', position.y >= point.plotY);
    return position;
  }
}

补充CSS样式

/* 向下箭头（提示框在数据点上方） */
.highcharts-tooltip.tooltip-down span::before {
  bottom: -11px;
  border-top-color: rgba(255,255,255,0.85);
  border-bottom-color: transparent;
}
.highcharts-tooltip.tooltip-down span::after {
  bottom: -10px;
  border-top-color: rgba(0,0,0,0.9);
  border-bottom-color: transparent;
}

/* 向上箭头（提示框在数据点下方） */
.highcharts-tooltip.tooltip-up span::before {
  top: -11px;
  border-bottom-color: rgba(255,255,255,0.85);
  border-top-color: transparent;
}
.highcharts-tooltip.tooltip-up span::after {
  top: -10px;
  border-bottom-color: rgba(0,0,0,0.9);
  border-top-color: transparent;
}

这样修改后，箭头就会变成黑色，同时白色边框会完美包裹箭头，不会出现穿透的问题。

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