Colin Colin - 1 year ago 71
Javascript Question

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.

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download