时间戳

首页 > 解决方案 > Highcharts 工具提示自定义 CSS 将插入符号/箭头变为白色

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

问题描述

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

  1. 插入符号/箭头是白色的

  2. 白色边框轮廓不会出现在插入符号/箭头上，而是穿过箭头

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

PS 故意将图表压缩到 100 px 是为了测试值标签上的工具提示透明度

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

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

标签： csshighcharts

解决方案

不确定您是否正在寻找：箭头是 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);*/
  ...
}

更新的小提琴

推荐阅读