Highcharts tooltip get position and change class

By : hcharge
Source: Stackoverflow.com

I have a custom tooltip that I have styled using HTML and headerFormat etc, like so:

tooltip: {
            useHTML: true,
            valueDecimals: 2,
            backgroundColor: 'none',
            borderColor: '#c0c0c0',
            borderRadius: 0,
            borderWidth: 0,
            xDateFormat: '%d %b %y',
            headerFormat: '<div class="chart-tooltip"><span class="tooltip-header">{point.key}</span><br><div class="markers"><span class="tooltip-bg"></span>',
            pointFormat: '<span class="tooltip-marker" style="background: {series.color};"></span>' +
                '<span class="tooltip-series" style="color: {series.color};">{point.y}</span><br>',
            footerFormat: '</div></div>',
            animation: false,
            shadow: false,
            style: {
                padding: '0px'

Using the classes I have then styled the tooltip with my external CSS file. This works well except for one problem, the tooltip looks like this:

enter image description here So the problem is when the crosshair is over to the left of the chart, the tooltip goes over to the right and the arrow is on the wrong side.

enter image description here

Is it possible to know when the tooltip changes sides, and then add a class accordingly? So I can then adjust the styles.

Any help would be great, thanks.

By : hcharge


You can use tooltip positioner to have influece on position. http://api.highcharts.com/highcharts#tooltip.positioner

I'm not sure if this would help you, but you can check it:

Check the API of tooltip->positioner: http://api.highcharts.com/highcharts#tooltip.positioner (if you are using highstock you can use it too)

    positioner:function(boxWidth, boxHeight, point){

The default tooltip for highcharts is (highcharts.js):

 * Place the tooltip in a chart without spilling over
 * and not covering the point it self.

getPosition: function (boxWidth, boxHeight, point) {

// Set up the variables
var chart = this.chart,
    plotLeft = chart.plotLeft,
    plotTop = chart.plotTop,
    plotWidth = chart.plotWidth,
    plotHeight = chart.plotHeight,
    distance = pick(this.options.distance, 12),
    pointX = point.plotX,
    pointY = point.plotY,
    x = pointX   plotLeft   (chart.inverted ? distance : -boxWidth - distance),
    y = pointY - boxHeight   plotTop   15, // 15 means the point is 15 pixels up from the bottom of the tooltip

// It is too far to the left, adjust it
if (x 
By : Lorenzo

This video can help you solving your question :)
By: admin