Highcharts 工具提示自定义 CSS 将插入符号/箭头变为白色答案

【问题标题】：Highcharts tooltip custom CSS turning the caret/arrow whiteHighcharts 工具提示自定义 CSS 将插入符号/箭头变为白色
【发布时间】：2020-03-25 21:36:00
【问题描述】：

我在我的 Highcharts 工具提示中应用了一些自定义 CSS 样式，以更好地符合我当前的设计，但我的样式有两个小问题：

插入符号/箭头是白色
白色边框轮廓未显示在插入符号/箭头上，而是穿过箭头

这是我使用的 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;
}

附：图表故意压缩到 100 像素是为了测试值标签上的工具提示透明度

我不太确定如何将箭头的颜色改回黑色，因为我使用的是background-color 标签，我假设它仅适用于矩形的颜色。

小提琴：http://jsfiddle.net/4mznaybs/83/

【问题讨论】：

这是想要的结果吗？：jsfiddle.net/BlackLabel/778hLso8

标签： css highcharts

【解决方案1】：

不确定您是否正在寻找：箭头是 svg 路径，因此您必须在其中应用填充颜色。

.highcharts-tooltip path{
  fill:rgba(255,0,0,1);
}

白色边框轮廓不会出现在插入符号/箭头上，而是穿过箭头 根据您的 js 代码，没有任何边框，但您添加了 box-shadow

.highcharts-tooltip span {
  ...
  /*box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.85);*/
  ...
}

Updated fiddle

【讨论】：