adapting text to highchart tooltip max width

Question

I wanna adapt vertically the text in my highcharts tooltip (a max-width is defined, so if text does not fit to this max width, increase tooltip height to fit the text in)

What works for simple HTML stuff...

#my_div
{
   height:auto;
   max-width:140px;
   overflow:auto
}

does not work for highcharts tooltips, see http://jsfiddle.net/perikut/hNCDb/2/

Answer 1

Simply add this to the chart options:

tooltip:{
    shared: false,
    useHTML: true
}

Then add the following to your CSS:

.highcharts-tooltip span {
    height:auto !important;
    width:140px !important;
    max-width:140px !important;
    overflow:auto !important;
    white-space:normal !important; 
}

You are good to go! ;-)

Answer 2

default white-space is set nowrap, you should change it to normal.

.highcharts-tooltip span {
    height:auto;
    width:140px;
    background-color:green;
    overflow:auto;
    white-space:normal !important; // add this line...
}

DEMO

Answer 3

If you only want to change the white-space behavior ofthe tooltip for a single chart and/or seperately control the style for each individual chart, you can use the following approach:

 tooltip: {
    useHTML: true,
    formatter: function() {
        return "<div style='width: 400px; white-space:normal;'>" + this.points[0].point.yourDataPointValue + "</div>";
    }  
 }

Demo

Note that you can/should use use a class name versus an inline style if you want to reuse the same style for multiple tooltips.