Пользовательский CSS всплывающей подсказки Highcharts, поворачивающий курсор / белую стрелку

Question

Я применил несколько пользовательских стилей CSS к моей подсказке Highcharts, которая лучше согласуется с моим текущим дизайном, но есть две незначительные проблемы с моим стилем:

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;
}

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);*/
  ...
}

Обновленная скрипка