Rectangle 27 0

Here's one solution I've put together in JSFiddle, although it's a bit of a hack.

Add the following line to the mouseover event:

chart.tooltip.refresh(chart.series[1].points[2]);

This displays the tooltip for an appropriately placed point in a hidden series.

A custom tooltip formatter then returns the required text.

Thanks for that! Didn't even think of doing it that way!

javascript - Highcharts + Plotband tooltip hover + default styling - S...

javascript svg tooltip highcharts
Rectangle 27 0

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.

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

javascript - Highcharts + Plotband tooltip hover + default styling - S...

javascript svg tooltip highcharts