Search code examples
javascriptsvgtooltiphighcharts

Highcharts + Plotband tooltip hover + default styling

I'm trying to find the easiest way to have a tooltip show up when you hover over a plotband. The events part is fine, I can access mouseover and out but I need to find a way to display a tooltip in the same style as the default look and feel for Highcharts.

Here's a quick example. I need the text "Show me on hover in a tooltip" to display as a tooltip styled the same as Highcharts default somewhere based on the mouse coordinates?

I've had a look at the docs and couldn't find any help.

Any ideas?

Thanks in advance.

Solution

  • 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.