adattamento del testo alla larghezza massima del suggerimento del diagramma alto

Question

Voglio adattare verticalmente il testo nel mio suggerimento highcharts (è definita una larghezza massima, quindi se il testo non si adatta a questa larghezza massima, aumentare l'altezza del tooltip per adattarlo al testo)

ciò che funziona per semplice roba HTML ...

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

non funziona per Highcharts tooltip, vedere http://jsfiddle.net/perikut/hNCDb/2/

Answer 1

di default è impostato white-spacenowrap, si dovrebbe cambiare a normal.

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

DEMO

Answer 2

Se si desidera solo cambiare il white-space comportamento diLa suggerimento per un singolo grafico e/o separatamente controllare lo stile per ogni singolo grafico, è possibile utilizzare il seguente approccio:

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

Demo

noti che è possibile/dovrebbe usare usare un nome di classe contro un INL stile elegante se si desidera riutilizzare lo stesso stile per più suggerimenti.

Answer 3

Basta aggiungere questo alle opzioni del grafico:

tooltip:{ 
    shared: false, 
    useHTML: true 
} 

quindi aggiungere il seguente al vostro CSS:

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

vi sono buone per andare! ;-)