高图钻阵和不一致样式的工具

Question

我正在使用usehtml = true和格式化选项来创建我自己的样式工具提示，并且在顶层很好。工具提示是按需使用CSS的标签的"顶部"。但是，当我使用DrillDown功能加载详细的地图时，这些工具提示不遵守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

使用tooltip.useHTML时，HighCharts中看起来有一个错误。样式仅应用于第一个负载，并且换了工具提示和标签容器的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/