[Solved]-Highcharts + Plotband tooltip hover + default styling-Highcharts

Another solution would be to use the "label" property of plotBands/plotLines with "useHTML:true" flag and CSS hover.

xAxis: {
//...code    
   plotLines: [{
      //...code
      dashStyle: 'Dash',
      color: '#000000', 
      width: 2,
      label: {
          text: `<div class="plotline">
                     <div id="custom-tooltip" class="thetooltip">
                         My custom tooltip!
                     </div>
                 </div>`,
          useHTML: true,
      }
   }]
}

Modified CSS would be:

.thetooltip {
    display: none; //the main change
    border: 1px solid #2f7ed8;
    background-color: #fff;
    opacity: 0.8500000000000001;
    padding: 4px 12px;
    border-radius: 3px;
    position: absolute;
    top:100px;
    box-shadow: 1px 1px 3px #666;
}

And of course in plotline class:

.plotline {
     &:hover {
       .thetooltip {
          display: block;
        }
     }
}

In my opinion, it is a more robust solution - first, it is a CSS solution, not JS, and from the UX/UI point of view works smoother than the quirky JS (just try to set the timeout right!)

I made another variant based on Gregs answer but for plotlines instead, since that was what I needed. I suppose it would be easily translated to plotBands as well.

This variant also works with events, but instead displays another div instead of relying on a particular hidden series.

The example can be found at JSFiddle.

So the tooltip is added in the same container as the chart

<div id="tooltip" class="thetooltip">
    <p id="tooltiptext" style="margin:0">default</p>
</div>

and when the user mouses over a plotline an event is fired which displays the tooltip along with an attached tooltip

var $tooltip = $('#tooltip');
$tooltip.hide();
var $text = $('#tooltiptext');
displayTooltip = function (text, left) {
    $text.text(text);
    $tooltip.show();
    $tooltip.css('left', parseInt(left)+24 + 'px');
};
var timer;
hideTooltip = function (e) {
    clearTimeout(timer);
    timer = setTimeout(function () {
        $tooltip.fadeOut();
    }, 5000);
};

And then each plotline is defined with an additional option, tooltipText, and events for displaying the div above.

plotLines: [{
    tooltipText: 'hello',
    value: Date.UTC(2011, 2, 28, 0, 1, 1),
    color: '#ff6666',
    dashStyle: 'solid',
    width: 3,
    events: {
        mouseover: function (e) {
            displayTooltip(this.options.tooltipText, this.svgElem.d.split(' ')[1]);
        },
        mouseout: hideTooltip
    }
}

the tooltipText is not part of highcharts api, but when defined it is available via the options property on the element.

The css for the tooltip can be defined similar to the default one by highcharts simply by mimicing the css:

.thetooltip {
    border: 1px solid #2f7ed8;
    background-color: #fff;
    opacity: 0.8500000000000001;
    padding: 4px 12px;
    border-radius: 3px;
    position: absolute;
    top:100px;
    box-shadow: 1px 1px 3px #666;
}