Highcharts + Plotband tooltip hover + default styling

Question

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 1

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

Answer 2

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.

Answer 3

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!)