Всплывающие подсказки о развертываниях Highmaps и несовместимых стилях?

Question

Я использую useHTML = true и параметры форматирования для создания своих собственных стилизованных всплывающих подсказок, и на верхнем уровне это нормально. Подсказки располагаются «сверху» надписей с использованием CSS, как и хотелось. Но когда я использую функцию детализации для загрузки подробной карты, всплывающие подсказки на них не подчиняются свойству zIndex, что позволяет просвечивать текст метки внизу. Кроме того, при возврате карты верхнего уровня всплывающие подсказки теперь также не подчиняются zIndex, и теперь нижние метки просвечивают.

Я загрузил пример на jsfiddle здесь:

 $(function () {
     Highcharts.setOptions({ "lang": { "drillUpText": "< Back to main area" } });
     $('#container').highcharts('Map', {
     "title": {
        "text": "Area 51"
     },
     "tooltip": {
        "headerFormat": "",
        "borderWidth": 0,
        "backgroundColor": "rgba(204,204,204,1)",
        "useHTML": true,
        "formatter": function () { return '<div class="fredTT">' + this.point.name + '<br>' + this.point.xdata + '</div>' }
     },
     "legend": {
        "enabled": false
     },
     "series": [
       {
          "id": "UK0",
          "type": "map",
          "dataLabels": {
             "enabled": true,
             "color": "#ffffff",
             "useHTML": true,
             "formatter": function () {return this.point.name}
  },
          "data": [
            {
               "xdata": "Some interesting data",
               "color": "#ffcccc",
               "drilldown": "Area_1",
               "name": "<b>Area 1</b>",
               "path": "M0,-994L204,-994L203,-480,0,-477z"
            },
            {
               "xdata": "Some more interesting data",
               "color": "#ccccff",
               "drilldown": "Area_2",
               "name": "<b>Area 2</b>",
               "path": "M204,-994L455,-994L457,-477,203,-480z"
            }
          ]
       }
     ],
     "drilldown": {
        "series": [
          {
             "id": "Area_1",
             "name": "NE Area 1",
             "type": "map",
             "dataLabels": {
                "enabled": true,
                "color": "#000000",
                "useHTML": true,
                "formatter": function () { return '<b>' + this.point.name + '</b><br>' + this.point.xdata}
             },
             "data": [
                       {
                          "color": "#ffcccc",
                          "name": "Area 1.1",
                          "xdata": "Secret #1",
                          "path": "M4,-992,513,-988L513,-787L2,-786z"
                    },
                       {
                          "color": "#ccffcc",
                          "name": "Area 1.2",
                          "xdata": "Secret #2",
                          "path": "M2,-786,513,-787,515,-538,3,-536z"
                       },
                       {
                          "color": "#ccccff",
                          "name": "Area 1.3",
                          "xdata": "Secret #3",
                          "path": "M3,-536,515,-538,516,-293,0,-294Z"
                       },
                       {
                          "color": "#ffffcc",
                          "name": "Area 1.4",
                          "xdata": "Secret #4",
                          "path": "M0,-294,516,-293,514,8,4,6Z"
                       }
             ]
          },
          {
             "id": "Area_2",
             "name": "Area 2",
             "type": "map",
             "dataLabels": {
                "enabled": true,
                "color": "#000000",
                "useHTML": true,
                "formatter": function () { return '<div class="ddTT"><b>' + this.point.name + '</b></div>'}
             },
             "data": [
                       {
                          "color": "#ffffcc",
                          "name": "Area 2.1",
                          "xdata": "Secret #5",
                          "path": "M4,-992,513,-988L513,-787L2,-786z"
                    },
                       {
                          "color": "#ffcccc",
                          "name": "Area 2.2",
                          "xdata": "Secret #6",
                          "path": "M2,-786,513,-787,515,-538,3,-536z"
                    },
                       {
                          "color": "#ccffcc",
                          "name": "Area 2.3",
                          "xdata": "Secret #7",
                          "path": "M3,-536,515,-538,516,-293,0,-294Z"
                          },
                       {
                          "color": "#ccccff",
                          "name": "Area 2.4",
                          "xdata": "Secret #8",
                          "path": "M0,-294,516,-293,514,8,4,6Z"
                          }
              ]
          }

        ]
     }
  })})

Answer 1

Похоже, что в Highcharts есть ошибка при использовании tooltip.useHTML.Стили применяются только при первой загрузке, и позиция DOM контейнеров всплывающих подсказок и меток меняется местами.

Обходной путь:

1. В функции tooltip.formatter возвращает divс каким-то классом (как вы это сделали - fredTT).
2. Отключить подсказку backgrondColor и shadow.
3. Добавьте следующие стили CSS:

.fredTT {
  padding: 7px;
  border-style: none;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid #c5c5c5;
  border-radius: 5px;
  opacity: 1;
}

.highcharts-tooltip {
  z-index: 7;
}

Демонстрация:

• https://jsfiddle.net/BlackLabel/yv1fbasj/1/