Highcharts Tooltip cropping

Question

I am using high charts but am experiencing an issue with larger tooltip cropping off at the outer elements of the SVG, as per the image below.

The option useHTML is set to true for the tooltip and xAxis, as I am applying some custom CSS these elements.

Is there a way to have the tooltip not to crop?

My highcharts code looks like this:

        return {
        chart: {
            renderTo: this._chartContainer,
            type: 'columnrange',
            inverted: true
        },
        title: {
            text: this._getTitle(values)
        },
        xAxis: {
            categories: values.rows.labels[0],
            labels: {
                formatter: function() {
                    return '<span class="xAxisTruncate" title="' + this.value + '">'+ this.value +'</span>';
                },
                useHTML: true
            }
        },
        yAxis: {
            max: this._getMax(),
            min: this._getMin(),
            gridLineWidth: 2,
            opposite: true,
            tickInterval: 31 * 24 * 3600 * 1000,
            type: 'datetime',
            dateTimeLabelFormats: {
                month: '%b %y'
            },
            title: {
                text: yAxisTitleText
            },
            endOnTick: false,
            labels: {
                align: 'left'
            }
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                borderColor: 'transparent',
                borderRadius: 5,
                groupPadding: 0.05
            },
            columnrange: {
                dataLabels: {
                    enabled: true
                },
                animation: false,
                colorByPoint: false
            }
        },
        legend: {
            enabled: false
        },
        series: columnRangeSeries,
        tooltip: {
            enabled: true,
            useHTML: true,
            formatter: function(){
                return this.point.toolTip;
            }
        }
    };

Thanks in advance.

Answer 1

I'm pretty sure, that similar topic exists on stack, however I can't find it. In general it is possible to achieve that using HTML tooltip, see: http://jsfiddle.net/7wVDV/147/

CSS:

.highcharts-container {
  overflow: visible !important;
}
.MyChartTooltip {
  position: relative;
  z-index: 50;
  border: 2px solid rgb(0, 108, 169);
  border-radius: 5px;
  background-color: #ffffff;
  padding: 5px;
  font-size: 9pt;
}