Highcharts Highmaps细分和不一致样式的工具提示？

我正在使用useHTML=true和格式化程序选项来创建我自己的样式化工具提示，这在顶级很好。根据需要，工具提示位于使用CSS的标签的“顶部”。但是，当我使用向下钻取功能加载详细地图时，这些地图上的工具提示不符合zIndex属性，允许下面的标签文本显示出来。此外，在返回顶级贴图时，工具提示现在也不符合zIndex，并且下面的标签会显示出来

我在这里加载了一个示例：

$（函数（）{
setOptions（{“lang”：{“drillUpText”：“返回主区域”}）；
$（“#容器”）.highcharts（'Map'{
“标题”：{
“文本”：“第51区”
},
“工具提示”：{
“人头税”：“，
“边界宽度”：0，
“背景色”：“rgba（204204,1）”，
“useHTML”：正确，
“格式化程序”：函数（）{return'+this.point.name+'
'+this.point.xdata+'}
},
“传奇”：{
“已启用”：false
},
“系列”：[
{
“id”：“UK0”，
“类型”：“地图”，
“数据标签”：{
“启用”：正确，
“颜色”：“ffffff”，
“useHTML”：正确，
“格式化程序”：函数（）{返回this.point.name}
},
“数据”：[
{
“扩展数据”：“一些有趣的数据”，
“颜色”：“ffcccc”，
“向下展开”：“区域1”，
“名称”：“区域1”，
“路径”：“M0，-994L204，-994L203，-480,0，-477z”
},
{
“扩展数据”：“一些更有趣的数据”，
“颜色”：“CCFF”，
“向下展开”：“区域2”，
“名称”：“区域2”，
“路径”：“M204，-994L455，-994L457，-477203，-480z”
}
]
}
],
“向下展开”：{
“系列”：[
{
“id”：“区域1”，
“名称”：“东北1区”，
“类型”：“地图”，
“数据标签”：{
“启用”：正确，
“颜色”：“000000”，
“useHTML”：正确，
“格式化程序”：函数（）{return'+this.point.name+'
'+this.point.xdata}
},
“数据”：[
{
“颜色”：“ffcccc”，
“名称”：“区域1.1”，
“扩展数据”：“秘密1”，
路径：“M4，-992513，-988L513，-787L2，-786z”
},
{
“颜色”：“#ccffcc”，
“名称”：“区域1.2”，
“扩展数据”：“秘密2”，
“路径”：“M2，-786513，-787515，-538,3，-536z”
},
{
“颜色”：“CCFF”，
“名称”：“区域1.3”，
“扩展数据”：“秘密3”，
“路径”：“M3，-536515，-538516，-293,0，-294Z”
},
{
“颜色”：“ffffcc”，
“名称”：“区域1.4”，
“扩展数据”：“秘密4”，
“路径”：“M0，-294516，-293514,8,4,6Z”
}
]
},
{
“id”：“区域2”，
“名称”：“区域2”，
“类型”：“地图”，
“数据标签”：{
“启用”：正确，
“颜色”：“000000”，
“useHTML”：正确，
“格式化程序”：函数（）{return'+this.point.name+''}
},
“数据”：[
{
“颜色”：“ffffcc”，
“名称”：“区域2.1”，
“扩展数据”：“秘密5”，
路径：“M4，-992513，-988L513，-787L2，-786z”
},
{
“颜色”：“ffcccc”，
“名称”：“区域2.2”，
“扩展数据”：“机密#6”，
“路径”：“M2，-786513，-787515，-538,3，-536z”
},
{
“颜色”：“#ccffcc”，
“名称”：“区域2.3”，
“扩展数据”：“秘密#7”，
“路径”：“M3，-536515，-538516，-293,0，-294Z”
},
{
“颜色”：“CCFF”，
“名称”：“区域2.4”，
“扩展数据”：“秘密#8”，
“路径”：“M0，-294516，-293514,8,4,6Z”
}
]
}
]
}
})})

在使用

工具提示时，Highcharts中似乎存在错误。使用HTML

。样式仅在第一次加载时应用，并且工具提示和标签容器的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;
}

演示：

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