Tooltips on Highmaps drilldowns and inconsistent styles?

Question

I am using useHTML = true and the formatter options to create my own styled tooltips, and it's fine at the top level. Tooltips sit "On top" of the labels using CSS, as wanted. But when I use the drilldown feature to load a detailed map, the tooltips on those don't obey the zIndex property, allowing label text underneath to show through. Furthermore, on then returning the top-level map, the tooltips are now also disobeying the zIndex and now the underlying labels show through.

I have loaded an example on jsfiddle here:

 $(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

It looks like there is a bug in Highcharts when using tooltip.useHTML. Styles are applied only on the first load and the DOM position of tooltip and labels containers is swapped.

Workaround:

1. In the tooltip.formatter function return div with some class (as you did - fredTT).
2. Disable tooltip backgrondColor and shadow.
3. Add CSS styles like that:

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

Demo:

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