How to set z-index level on label tooltip in highcharts.js

问题

I want to have tooltip also on the xAxis labels. I managed to do it using the events in the highcharts, but the tooltip (with text "Custom tooltip") is always displayed under the label, and I need it to be over the label (which is the small red square).

This is the code for highcharts:

Highcharts.chart("ch", {
        chart: {
            zoomType: "x",
            type: "line", // line
            width: 1100, // 1100
            plotAreaWidth: 1100, // 1100
            plotAreaHeight: 400, // 400
            events: {
                load: function () {
                    var chart = this,
                        xAxis = chart.xAxis[0],
                        halfTooltipWidth,
                        posX,
                        posY;

                    for (var key in xAxis.ticks) {
                        (function (label) {
                            label
                                .on("mouseover", function (e) {
                                    chart.tooltip.refresh({
                                        series: chart.series[0],
                                        getLabelConfig: function () {
                                            return {
                                                xAxisLabel: label,
                                                tickVal: key
                                            };
                                        }
                                    });

                                    halfTooltipWidth = chart.tooltip.label.width / 2;
                                    posX = label.xy.x - halfTooltipWidth;
                                    posY = label.xy.y;

                                    chart.tooltip.move(posX, posY, posX + halfTooltipWidth, posY - 10);
                                })
                                .on("mouseout", function (e) {
                                    chart.tooltip.hide();
                                });
                        })(xAxis.ticks[key].label);
                    }
                }
            }
        },
        title: {
            text: "<span style='color: #0071bc; font-weight: bolder; font-size: 20px'>titlino</span>",
            align: "left",
            x: 7,
            useHTML: true
        },
        credits: { enabled: false },
        series: [
            {
                name: "a name 4",
                marker: {
                    fillColor: "green",
                    radius: 5
                },
                color: "yellow",
                data: [4,5,6]
            },
            {
                // Mediana
                name: 'name3',
                marker: {
                    fillColor: "transparent"
                },
                color: "#00ffff",
                data: [3,3,3]
            },
            {
                name: "another name",
                marker: {
                    fillColor: "transparent"
                },
                color: "orange",
                data: [2,2,2]
            }
        ],
        legend: {
            enabled: false
        },
        tooltip: {
            useHTML: true,
            zIndex: 999,
            style: {
                marginTop: "0px",
                background: "green",
                position: "sticky"
            },
            formatter: function (tooltip) {
                if (this.y) {
                    return tooltip.defaultFormatter.call(this, tooltip);
                }
                console.log(this.xAxisLabel, this.tickVal);
                return "Custom tooltip";
            }
        },
        yAxis: {
            gridLineDashStyle: "dash",
            title: {
                text: null
            }
        },
        xAxis: [
            {
                gridLineDashStyle: "dash",
                gridLineWidth: 1,
                tickInterval: 1,
                type: "line",
                labels: {
                    step: 1,
                    style: {
                        "text-align": "center"
                    },
                    useHTML: true,
                    formatter: function () {
                        //console.log(this);

                        return (
                            "<span data-toggle='tooltip' style='position: sticky; z-index: 0; margin:0 auto; background-color: red;' class='label-rect'></span>"
                        );
                    }
                }
            },
            {
                // the actual xAxis with dates labels
                linkedTo: 0,
                opposite: true,
                tickInterval: 1,
                type: "line",
                labels: {
                    rotation: -45,
                    step: 1,
                    style: {
                        "text-align": "center"
                    },
                    useHTML: true,
                    formatter: function () {
                        return "some text again"

                    }
                }
            }
        ]
    });

As you can see the labels are custom, and that is fine. But the tooltip is always under the label. This is the fiddle where you can see the problem. Hover over one of the red squares, and the tooltip is always under the red square:

https://jsfiddle.net/f96pj4ak/

来源：https://stackoverflow.com/questions/65321590/how-to-set-z-index-level-on-label-tooltip-in-highcharts-js