Question

我已经在我的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;
}

P.S。故意将图表压缩到100像素，以测试工具提示透明度到值标签

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

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

Answer 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

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

1 个答案: