score:18

Accepted answer

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

score:4

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

score:5

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.


Related Query

More Query from same tag